Living Code

I’ve been getting more Javascript questions, both at work and elsewhere, so I thought I’d post some of the resources I rely on, in case it is helpful to others, and so I have something to point folks to.

Mozilla Developer Center is hard to navigate or search to find useful information, which is too bad, because there are some gems hidden away in it. One of the ones I come back to again and again is the Core Javascript Reference 1.5. Javascript 1.5 is out of date now, but in this case it just means this reference is useful across more browsers.

I have become a major fan of jQuery, so the docs for it have found a place on my bookmark bar as well.

A key site for looking up web standards info is W3Schools, and their Javascript section is sometimes helpful, although their HTML DOM section is even better, especially for the semi-standard DOM Level 0 stuff like window and location.

For questions about the DOM, I still go back to the W3C DOM Spec, especially Appendix H, which is the ECMAScript (Javascript) Binding, or API.

Finally, I sometimes find that the Microsoft documentation for IE is helpful. They often reorganize their site, and their search isn’t very helpful, so the best way I’ve found to find information is to use google search with the term site:msdn.microsoft.com in addition to your search term(s). I don’t know how anyone at Microsoft finds things on their own site, but I expect they end up using Google too.

Those are the essential references I use. None of them are particularly helpful for learning Javascript in the first place, or for developing a good style and using more advanced techniques, or taking advantage of browser specific features. If there is interest, I can write about those another time.

I’ve been slinging Javascript and HTML for a good long time now, more or less as long as each one has existed. I was using the techniques commonly known as Ajax since way before Microsoft invented XMLHTTPRequest. I wrote a shared, collaborate bookmarking tool for my own use about ten years before del.icio.us existed, and I built a web-based dynamic outliner for my thesis project using IE4 (first browser to support XML).

So the current crop of browsers, and great libraries like JQuery have been very inspiring to me. Rather than struggle against the browsers, I can just get work done (most of the time). It’s refreshing, and Javascript has never been so much fun. I’m still learning new twists and turns of HTML that I hadn’t explored, or hadn’t worked in earlier browsers, still learning new CSS tricks after all these years, and of course I have to unlearn a lot of my acquired wisdom that simply ain’t so anymore. With the upcoming HTML5 and ECMAScript Harmony things promise to get even more interesting.

With all that context out of the way, I’m pleased to note that there are at least four browsers on the way that promise to make my web life better (and adoption of new browsers has sped up due to automatic updates, so hopefully we won’t have to wait ten years to be able to rely on the features of new browsers. Microsoft’s IE8 is in its second beta, with full CSS 2.1 at last and many more improvements to Javascript and DOM compliance, and we can at least hope that someday they will accept HTML 5, CSS 3, and all the other goodies that arose on the web while they were sleeping. There is a beta of Safari 4 available to registered Apple developers, with lots of new goodies. Mozilla has an alpha out for Firefox 3.1, with a beta due by the end of the month, and they are planning their 4.0 version. And Google has entered the arena, with their long-rumoured GBrowser: Chrome (the nearly chrome-less browser).

Aside from IE, which is still trying to catch up with state of the art in the late ’90s, the new browsers all boast lightning-fast Javascript engines, SVG and Canvas for 2D graphics, and cutting-edge features from CSS 3 and HTML 5 on top of their (mostly) rock-solid foundations of existing web standards. All of this is great, and makes me very happy, but one thing would make me happier. One thing still stands in the way of every web app I’ve worked on and continues to hold the web back. One thing forces sites to fall back to ugly, broken halfway-solutions in Flash or Java. One thing that could be fixed in browsers to make everyone’s experience better.

File uploads (<input type=”file” />)

The browsers currently do not allow you to style the file input in any meaningful way, without resorting to insane hacks. You can’t start in a user’s home or documents directory. You can’t filter to only allow graphic files to be uploaded to a graphics site. You can’t choose multiple files. You can’t choose a directory to upload the files in it. You definitely cannot drag files and drop them on your webapp.

More and more, the webapps are the applications users interact with the most. Webapps are used as word processors, calendars, spreadsheets, presentation builders, photo editors, photo albums, and more. And as it stands, every browser that I am aware of is fundamentally broken in this one regard.

Who wants to be the first to fix it and make Dethe happy?

There is a lot of interesting stuff happening in Javascript land these days, even to the point of other languages targetting the browser as a runtime, but running on top of Javascript. You can run Scheme right in the browser, and by now everyone has probably heard of Objective-J (open-source coming soon), an Objective-C-like language used by 280 North to create their 280 Slides web application, inspired by Apple’s Keynote.

Since my last post about Processing, John Resig managed to port most of Processing to Javascript, so it is easier than ever to get started. Now instead of having to download the Java-based runtime, you can create Processing animations in your browser, within the limitations that it only targets very recent, beta browsers (Firefox 3, Opera 9.5, WebKit nightlies, no version of IE) and that not all of Processing is supported (no 3D, for instance, and my example from the earlier post does not run). Still, it is interesting and a lot of fun to play with. My seven-year-old son is fascinated with computer programming and looking to move beyond Scratch, so as part of that I stuck all the basic examples from Mr. Resig’s site into one page, with a menu to select them, and a button to run them. And I made them editable. You can write entirely new code too, of course, but the examples can help for getting started. I hope folks enjoy it.

Processing Playground

Of course, what my kids really want is a version of Scratch that we can extend to add some more features of our own. Scratch has been open-sourced, so we could possibly extend it, but it is built on Squeak Smalltalk, and I’ve never been very good at Smalltalk. Instead, I am porting it to Javascript. It is still in the early stages, but I’m making steady progress in my hour or so I have to code each evening, and my kids are eager to use it, so they keep me motivated and focussed.

In my sidebar, under Mini Projects is one called Silent Boggle. When my daughter was born, my wifed Daniela and I like to play Boggle a lot, but we worried about the noise waking the baby, so I coded up a quick CGI script to create a web page listing the letters with the same frequency as the game. That worked OK, and now we could play without rattling the box, but of course a project never stops where you thought it would. I kept thinking that it would be cool if I could list all the words available, making it useful for learning new vocabulary, or just checking your score. It turns out that Peter Norvig covered solving Boggle as an AI problem in his book AI: A Modern Approach. And he also provides the code from the book, in both Lisp and Python. So, armed with a standard linux word list, munged to remove words illegal or impossible in Boggle (and to handly my funky hack involving the Qu face of the Boggle dice) and the AIMA python libarary, I was able to get something going. A little slow, and resource intensive, but it works (if that project ever starts getting much traffic, I’ll have to stick the wordlist in a seperate, long-running process).

The thing is, the linux word list has a lot of words I don’t recognize and cannot find in any dictionary. At first I wanted to create links from the “answers” to a site with their definitions, but for many of the words there don’t appear to be definitions. I’d like to use this as a vocabulary building tool for my kids (my newborn daughter at the start of this project is now nine, and my son is now five and both are avid readers), but I can find two types of resources on the web: word lists suitable for use with the AIMA library, and dictionaries that don’t have associated word lists. I suppose I can dowload an open-source dictionary and extract the word-list myself, but it seems like with all the work that’s been done out there on wordlists and dictionaries, that there should be one that combines them both, that I just haven’t found yet.

So, lazyweb, I invoke thee! Please help me to find the wordlist + dictionary that I have overlooked in my searching.

Kathy Sierra, of the Creating Passionate Users blog, posted about using an equalizer metaphor for product planning and brainstorming. She included some images for her readers to play around with for their own equalizer-planning projects. I took those, apply the Gimp to them, mixed with Bob Ippolito’s uber-cool MochiKit, and release to you:

Sierra Sliders

You can label up to eight sliders using the text box, hit enter and tweak the sliders. When you have it the way you want it, you can bookmark the result and send it to your team members, or your mom. Tested in IE 6, Firefox 1.5, and Safari 2.0.2. Your mileage may vary. Void where prohibited by law. Some limitations may apply. Coded in a hurry™.