Recently I’ve been experimenting with the Scratch programming language, created by the Lifelong Kindergarten Group at MIT. It’s a fun environment that uses visual programming: drag-and-drop pieces of code blocks, and control objects on a stage, and the stage itself. It has quite a bit more depth to it, than the expression “visual programming language” implies, with it’s internal messaging system, multitasking, and event-driven approach. While it was originally aimed at creating interactive graphics and animations (see this TEDx talk by Prof. Mitch Resnick on the background), it is now evolving into new territories with the Scratch Experimental Extensions.
There are 26 maps in the collection, made by the US Army by flying over different parts of the island, and mostly I guess stitching together aerial photographs. The maps themselves were not that easy check in an image viewer, since there’s no context, zoom is clumsy, and have no idea where about half the places should be located. Instead, I thought it would be great to have them as an overlay on top of current maps and satellite imagery on Google Maps.
The result is Taiwan City Maps overlays, which does exactly that. Feel free to click the link and explore right now! In the rest of this post, I try to first show how that page was made, and also some history lessons I gained by making it.
It is very long overdue, since I was looking at Javascript like…. 14 years now? But never really spent time to understand it because I never needed it really. I’m old enough to remember that when I started to browse the web, every time there was a page using Javascript, people’s sentiment was “oh, no, that’s going to be very slow, I don’t even want to check this site anymore”. Pretty much like it was/is with Flash later on.
Compare this to now, how 100% static sites are practically disappeared, and no web developer worth their salt should skip on learning it. I’m glad that browsers spent a lot of time improving performance and that so many interesting projects came out of it.
My impression of the current state of the art is that using HTML + CSS + Javascript now it is easier than ever to make good front-ends for programs. I’m mostly a command-line guy (and that’s pretty easy with many scripting languages as well as Python that I use), but I cannot deny that I’m the minority. Still, when i need convenience, I can even imagine people creating local (meaning not internet-enabled) software with those things.
Since more and more people had similar idea and started to work on it, there are plenty of projects that make this even easier, like jQuery and all its plugins. I don’t think people need a lot of introduction and already can do a lot of things easier using that. One drawback is that many things could be just as easily done in pure Javascript but people quite often don’t know that. I certainly have to learn a lot more.
In this month I was reading a few books and sites that people recommended on Hacker News, as well as I used it to do a few actual projects. Now that’s a change compared to the previous Language of the Month columns.
Projects
WatchDoc: a Chrome extension that notifies you when your shared documents on Google Docs change. Chrome extensions are merely HTML+CSS+JS code, so it was a perfect way to try a few things. (Will write it up here later) (wrote up here).
NowJS real time games hackathon: NowJS is a real-time communication plugin for NodeJS, the JS server. I wanted to make a game for this hackathon, but run out of time. Spent some time working with it, and it’s actually pretty awesome when I started to understand it, I’m do want to finish the game at a later time (it’s a multiplayer trivia game) . (Will write it up here later)
Venus & Mars: a little afternoon project using Facebook to help my friend’s research assignment at her university. Listing people’s status updates separated by gender. It looks awfully ugly, because I just wanted to make it work, but for the fun of it it’s NodeJS so good to practice my JS-foo. (Will write it up here later)
Impressions
I definitely going to learn more of it, because now that I start to understand I quite like it, and I cannot imagine it going away anytime soon. Now that it is just a matter of seconds to set up a project on the web (really, on Heroku, Appengine, dotCloud are all one click away) there’s no good excuse not to do that.
Good
JSON, ’nuff said. That’s just such a good data format that is both human and machine readable. Seem to be pretty much the
No problem (it seems) with Unicode and international characters. Though I think it uses UTF-16 while many other code is using UTF-8, not sure if that makes any difference.
Feels quite light and flexible (from the language point of view, not necessarily the resources needed)
Since the source of websites is necessarily open, it is possible to learn from others’ examples much easier than otherwise.
Bad
Feels like it has a lot of baggage from it’s long(ish) and torrid life, which makes it feel a bit inconsistent. E.g. the first day of the month is 1, but the first month (January) is 0.
People generally seem to write pretty bad Javascript code. Because it’s so easy everyone can make some useful project, but they are full of bugs. Fortunately it’s Open Source, so I can try to figure it out, and I did find a handful of upstream bugs. But the stress…. huh…
Ugly
Formatting of JS code can be pretty unreadable (especially comparing with Python where formatting is not optional). It is made more difficult when I’m editing JS within a HTML file, since Emacs cannot handle that well.
Up until quite recently there weren’t any really good tools to troubleshoot things. Fortunately there’s Chrome and it’s Javascript console, and Firebug for Firefox. There are still some mysterious errors and the debugging has to be planned well ahead.
There are many things that are straightforward but require a lot of typing. Fortunately projects like jQuery are trying to fix that, but still there’s a long way to go.
Just like in Lua, for keys in dictionaries the quotation marks are not required and they are still understood as strings. These kind of magic can be convenient but there are occasions when confusing.
Links
Books
Javascript: The Definitive Guide – how to do things in browser, very modern, even jQuery, teaches some strange practices like single line non {} functions and missing semicolons (for many pages!)
