MudLog

We’re currently developing an authentication system that would enable single login to all the web applications we make in the PLW. But the idea of developing a central login system isn’t new: Microsoft’s Passport has been around for years and Google uses a similar system (also, see Google Account Authentication). We’re not really after that. We just want to have a system in place so that we don’t have to maintain individual login systems nor user information every time we build a new application. Since we’re thinking about implementing an authentication system, it’s good to think about authentication systems in general.

It’s crazy how many accounts we have. It’s even crazier to see how often we share common usernames and passwords. Traditionally, authentication is done through matching unique usernames to some alpha-numeric password. I’m no security expert, but this seems secure enough. However, many websites select users’ email addresses as their unique username, and since users are allowed to choose their own passwords, many end up setting the same password.

What happens when one of these sites compromises your information. They essentially have access to all other accounts that share the same username and password. Using an email address as a username is also a bad idea, since it’s a unique identifier that is attached to one name. It’s just as bad as schools using social security numbers as student numbers.

With our system, we go back to the old fashion way of using physical metaphors. Our metaphor is the locker. Usernames are mapped to a locker number (which also has a location) and the password is a combination lock. Usernames no longer have personal identifiers attached to it, and the combination lock gives the user the understanding that if you forget your combination, you’re sort of screwed. You have to ask someone with a master key or get a locksmith to cut it off.

Here’s the combination lock, using canvas and written in JavaScript. Works best if you use a PowerMate; mapping rotate right to right arrow key, rotate left to left arrow key and button press to the enter key.

Finally, I finished what once was called PLWicense. It is now renamed to something a little more descriptive, called MadLicense. MadLicense is a Mad Libs-style license creator. Users are given a license template based on popular open source licenses (for now the MIT and Apache Licenses, but more to be added) with only specific modifiable words. In a way, it makes license creation easy, but also challenging since only certain words are modifiable. With this restriction, it forces users to creatively place words to come up with an applicable license for themselves.

I probably spend more time writing code than anything else during a typical day. Since I started joined the Lab in June, I have gone in every day (except for the day we went to New York to see Tufte) and spent time programming.

It’s a little odd. I hated programming. I thought it was useful, but I knew it wasn’t for me. I love computers, but I use computers to make visual things, not to write programs. In undergrad, I avoided programming at all cost. I never took a computer science class. I was a physics snob, and I viewed people in computer science to be future programming robots – great hackers were all burnout physics majors anyway! At some point I started liking programming, but I forgot when that happened.

Perhaps it’s the lack CS classes, but I always thought programming was just a tool and was never curious about why certain programming languages are the way they are. However, since spending the whole summer hacking away at Ruby and JavaScript, I got curious as to how and why the two are so different.

Ruby, much like Java is a class-based object oriented language where objects are created by instantiating a class, whereas JavaScript is prototype-based and objects are created by copying the prototype. I’m reading Prototype-based Programming and beginning to appreciate the flexibilities offered by JavaScript. Maybe there’s a reason why many applications which provide scripting layers use JavaScript. It’s also interesting to see that JavaScript has a lot in common with Scheme if you take away the syntactic differences. This means you should be spending more time hacking with JavaScript!

Off to decide what classes I should take this term…now that I think about it, I probably spend more time daydreaming.

Amber is working on adding audio tags to PLWire, so I began looking at browser support on playing sound files. From simple google searches, it’s easy to see that sound support hasn’t changed since the days of NN4 and IE4. I would assume this is because browsers rely on plugins to do the work, like Java, QuickTime and Flash. All I want is a way to create a sound object, be able to play, stop and to check whether or not the sound is being played.

I guess that’s too much to ask. Playing and stopping sound is easy to do, but if you have a bunch of sound files you want to play sequentially one after the other, you need the ability to see if a sound file is done playing or not. I just wanted a quick solution, so I gave up and decided to use QuickTime. Java Applet seemed too extreme and Flash, well I avoid Flash at all cost.

QuickTime offers scripting capabilities with JavaScript. It exposes a lot of features, which you can modify via JavaScript. But be warned, Apple’s documentation is pretty bad. Anyway, fastforward to the problem and solution.

You have a bunch of QuickTime movies, whether they are video or audio that you want to play one after the other. In QuickTime, QTNEXTUrl() is the method you will want to use. From the documentation:

string GetQTNEXTUrl(int index)

void SetQTNEXTUrl(int index, string url)

Get and set the URL and target for a specified item in a sequence. The URL of the first item in the sequence is invoked when the currently selected movie finishes. If the URL specifies a QuickTime movie and the special target myself, the next specified URL in the sequence is invoked when that movie finishes, and so on. The Set method is equivalent to setting the QTNEXTn parameter in the <embed> tag.

Setting the HTML page is simple. Just use either <embed> or a combination of <object> and <embed>. Something like the following:

<embed controller="true"
target="myself" xsrc="audio/1.mov"
pluginspage="http://www.apple.com/quicktime/download/indext.html"
enablejavascript="true" name="mysound" id="mysound"> </embed>

That will embed a QT with a file “audio/1.mov.” Now we write some simple JavaScript:

// holds all audio files
var audio_files = new Array();
function init() {
audio_files.push("/audio/1.mov");
audio_files.push("/audio/2.mov");
audio_files.push("/audio/3.mov");
// add to sound queue
for (var i = 1; i < audio_files.length; i++) {
document.mysound.SetQTNEXTUrl(i, "<"+audio_files[i]+”>T<myself>”);
}
}

Just call init() during window.onload(), and push all the audio in sequential order to audio_files. That should do it.

I finally got a summer haircut. I cut my hair above my eyebrows when summer arrives, and I repeat that process after a year when it grows down past my chin. It gave me a sense of time during my “working years” after my first grad school, since I no longer had the academic calendar to rely on.

I hate how my hair looks when I cut it that short. It looks just like the picture above. Total helmet-head. It’s a functional hair cut, since hair doesn’t get in the way and it just feels good. Usually I choose aesthetics over function, but every summer when the sticky disgusting tropical storm weather comes along, I opt for the functional.

This is the same with web applications. There are so many web applications out now, but most of them are purely functional and completely ugly. Google’s numerous services are good examples of where function dominates over aesthetics. Just look at the mess they call froogle.

The thing I like about all the Web 2.0 hype is that there is a concious effort to make things look good (and to make things move fluid and smooth.) For instance, Burak showed me Vimeo, which is basically the same thing as YouTube, except unlike YouTube, it doesn’t look like vomit. Also, they use Prototype.js, so they get a thumbs up just for that. The more I compare the two sites, the more I wonder why anyone will tolerate YouTube’s complete lack of aesthetics. I thought consumers where much more demanding of visual goodness ever since the iPod craze, but it still doesn’t translate over to the web world.

Maybe function always wins over aesthetics…I think I like my haircut now.

I heard about JSON a while ago, but I never looked closely at it until this past week. I was looking for a way to communicate between JavaScript and a Servlet (or anything cgi-like) with an AJAX call. Normally I would construct an XML file, parse through and construct HTML chunks and use innerHTML to update a section of the page. The problem with this is, XML is kind of a pain in the butt for a lazy programmer, and why bother constructing an XML file if you’re going to have to parse it back to something else?

You can’t spell XMLHttpRequest without XML. But you can sure go without using it. I make a lot of AJAX calls on websites these days. I know it doesn’t degrade with browsers running without JavaScript enabled. That’s not my problem. I really don’t care for people who turn JavaScript off. JSON is a much better way to publish data into JavaScript, because JSON is written as a plain old JavaScript Object, which looks like a simple hash table.

There’s nothing for you to do, all you have to do is grab it from the server (which would show itself as a string in JavaScript) and run eval on it to turn it into an object. In Ruby on Rails, there’s a simple helper method called: .to_json which makes constructing a JSON object simple…but Rails makes everything simple, and you spend less time programming brainless things like parsing XML.

I recently came across a problem of having to get Ruby on Rails running on Apache (port 80) communicate with Tomcat (port 8080.) I learned that there are numerous ways to get this done. The first approach was to use a connector, and Kyle got mod_jk set up and running so that Apache would connect to Tomcat with a particular URL. That all worked well, until I took the static HTML prototype and got it under the control of Rails.

I set up a virtual host running on port 80 to go to my Rails public directory, which worked fine. But once Rails takes control, the connector set up with mod_jk no longer worked; instead I just get a Rails error. Boo hoo.

I gave up on the connector approach. It seemed kind of flaky anyway. I really wanted to centralize where all this configurations were happening, and I wanted it out of the httpd.conf file, since I never feel comfortable modifying it. The best place would be inside the .htaccess file with the public directory, where all the other rewrite rules live.

I thought about having to create a webservice or some sort of proxy, but I learned about mod_proxy. It’s really easy to use, and gives you a new switch [P] in your rewrite rule. Enable it in httpd.conf and you can use it within the .htaccess file.

Your rewrite rule would look something like this:

RewriteRule ^tomcat-dir/(.*)$ http://localhost:8080/tomcat-dir/$1 [P]

My job here is done…

I just found out about TextSnippets this morning. Users upload chunks of code accompanied with brief documentation. You can then tag the code. It seems like a pretty handy site, and I think functionality like this could work well in OpenStudio 2.0.