Living Code

Run

OK, Bar Camp was over a month ago and I'm finally getting around to posting my second set of slides. I've included notes right in the PDF this time, summarizing what I think I was talking about at the time.

Aesthetic Programming for kids of all ages (PDF)

The reason this took so long is that I wanted to illustrate the concepts I was exploring out loud by embedding a programming environment into this blog post. So, what you see above is a tiny turtle language for Javascript and some examples of how to use it. When you click the Run button, you should see the script run by having some drawing going on in the frame above it. I've used Google's excanvas, which hopefully will let it run in IE, but I haven't tested it much beyond Safari and have no idea if it will survive transliteration into Atom and beyond. Let me know if it doesn't work for you, or if you have ideas for how to improve it. I will be putting some more thought into these ideas soon.

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.

Just for fun, and because I’m trying out two things:

1. Using Ecto for posting again
2. Blogging more often

Here are my results from the latest craze:

$ history|awk '{a[$2]++} END{for(i in a){printf "%5d\t%s\n",a[i],i}}'|sort -rn|head
139 ls
87 cd
54 python
43 /usr/bin/python
38 less
21 vim
16 clear
12 mate
11 rm
10 ssh

The first python is the one I built from source so I can include it in applications packaged with py2app, the second is the built-in python for Leopard. Both are version 2.5. The mate program is used to open files in TextMate from the command line.