Posts about programming

The Contenders

• The New York Times
  
• Digg.com
  
• Facebook
  
• Twitter
  
• Stack Overflow
  
• Google Search
  
• CNN
  
• Amazon
  
• Ebay
  
• BoagWorld
  
• Google Maps
  
• Google Docs
  
• Google Mail
  
• Remember The Milk
  
• Flickr
  
• Picasa Web
  
• YouTube
• Wordpress
  
• GitHub

Scoring System

To evaluate how well each site works with Javascript disabled, I will use a scoring metric. The scoring will be based on the following 6 questions, each account for 1 point of the total score. Thus, 6 out of 6 is the perfect score.

1. Can users navigate the site? (1 point)
   
2. Can users read/view the content? (1 point)
   
3. Is the site free of broken visual elements? (1 point)
   
4. Can users perform the key tasks of the site? (1 point)
   
5. Is the site free of broken input elements? (1 point)
   
6. If things are broken, are users made aware of it? (1 point)
   

Let's get started!

The New York Times

As expected, the New York Times looked great. Visually it didn't look much different from a Javascript enabled version. Flash ads are replaced by static image ads. One minor hiccup is a twitter widget which appears to spin indefinitely. The video section does not work at all, and there's is no message telling you you need Javascript to run it.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO(video section)
   
6. If things are broken, are users made aware of it? NO(video section)

Score 3/6 for the Times.

Digg

Digg's page looks okay. The flash ads have disappeared, leaving whitespace in their place. You can navigate the site and view articles just fine. However, you cannot "digg" or "bury" articles, which I think is a pretty key task of the site. 

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? NO(digg button broken)
   
6. If things are broken, are users made aware of it? NO

Digg gets a 2/6.

Facebook

From a visual stand point, Facebook looks perfect. You can navigate and read most of the content of Facebook, including viewing photo albums. You cannot update your status; you cannot edit your profile; you cannot record videos of yourself, and there's no warning. 

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? NO(can't update status)
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

Twitter

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

3/6 for Twitter.

Stack Overflow

When you go the SO, a flash banner informs you that the site works best with Javascript enabled: nice, how refreshing! Navigation works, even asking questions, editing and posting works. However, voting does not work. For this one, I'll allow that the key tasks work, because I think the most important things are asking and answering questions; voting, although important, is secondary to those two things.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? YES

5/6. Wow! Way to go, Jeff!

Google Search

Google Search works well, however, Image results that come up on the top of the search results show up blank. I gotta say I am very surprised that this doesn't work perfectly. I mean, this is the Google!

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? NO

4/6 for Google Search.

CNN

CNN worked about as well as the Times. Navigation and reading content worked but not the videos. Although the videos on CNN are more prominent than on the Times, and also break more spectacularly:

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

3/6 for CNN.

Amazon

Amazon is the one you gotta count on to do well in this. The site looks perfect. I've tested adding and update the shopping cart, which worked perfectly. I haven't actually gone all the way through and purchased something for this test, but I feel confident that everything would work.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? N/A

6/6! Perfect for Amazon!

Ebay

Ebay is also an old timer ecommerce site. I don't see how it could fail any of these.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? N/A

6/6 for Ebay.

Boagworld

Let's see if Paul puts his money where his mouth is. Boagworld looks perfect. forums work. Even the flash videos and audio work! That's pretty amazing. This is the first site I've seen where video works without Javascript.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? N/A

6/6. Good On Ya! Paul Boag!

Google Maps

Google Maps is the web application that gave life to Ajax. But much to my surprise, it actually works with Javascript turned off. Well... kinda sorta. You can plot an address on the map - even zoom and pan - but you cannot get directions. This is a tough one. On the one hand, it degrades 100% gracefully; on the other hand, without being able to give directions, it's all but crippled. 

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? N/A

5/6 for you, Google Maps. Hey, don't be sad, 5/6 is pretty damn good!

Google Docs

Ouch! That's not a pretty picture. None of the buttons or sidebar items did anything when clicked. The loading indicators are just stuck there. This thing is pretty much...dead.

1. Can users navigate the site? NO
   
2. Can users read/view the content? NO
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

Wow! Our first - and possible only - 0/6. Congrats Google Docs!

Gmail

Two epic fails in a row from Google? Are you kidding me? Oh, but wait! What's this? On the bottom right there's a "Load basic HTML" link. You click on it and...

Tada! Talk about drama! That's like a last second Hail-Mary pass for a TD or something. The functionality is all there for the basic HTML version. The only thing I'd pick on is the fact that it's not made very apparent that this option is available. In other words, the degradation ain't so graceful. I guess you could call it clumsy degradation?

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? NO

4/6 is all you get, Gmail!

Remember The Milk

Well, at least they are up-front about it...

1. Can users navigate the site? NO
   
2. Can users read/view the content? NO
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? YES
   
6. If things are broken, are users made aware of it? YES

3/6. Wow, you can not work at all, and still get 3/6!

Flickr

Flickr looks great, and mostly works. The things that don't work are in-place photo editing features, adding tags and people.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

4/6 for Flickr.

Picasa Web

Picasa Web informs you that your browser is not fully supported, but you are welcome to have a look around. You can see some pictures under the "Explore" tab, but not your own pictures. You also cannot upload your own pictures. It's basically crippled.

1. Can users navigate the site? NO
   
2. Can users read/view the content? NO
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? YES

1/6. Google, Google. Not doing so well, are you?

YouTube

Hate to rub it in, but YouTube is a FAIL as well. You can still navigate the site, but not play any videos.

1. Can users navigate the site? YES
   
2. Can users read/view the content? NO
   
3. Is the site free of broken visual elements? NO
   
4. Can users perform the key tasks of the site? NO
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

1/6 for YouTube.

WordPress

WordPress works for the most part, but the parts that don't work do not degrade gracefully. Comments are broken. "Visual" editing is also broken, but you can write posts.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

4/6 for Wordpress.

GitHub

Last but not least, GitHub. I am, after all, the geek's geek. GitHub actually works very well. The only hiccups are small UI elements like the URL box, and the "Add File" button of the Gist dialog.

1. Can users navigate the site? YES
   
2. Can users read/view the content? YES
   
3. Is the site free of broken visual elements? YES
   
4. Can users perform the key tasks of the site? YES
   
5. Is the site free of broken input elements? NO
   
6. If things are broken, are users made aware of it? NO

4/6 for GitHub.

Final Tally

Here is a summary of all the scores:

The winners were Amazon, Ebay, and Boag World. 

The average score for all the sites surveyed is 3.52. Only 26% of the site had a score of 5 or higher. What this practically means is that 74% of the sites had something broken about them when Javascript is disabled.

Summary By Metric

What this chart shows is that most sites allow users to navigate and/or view the content on the site, in fact around 80% of them do. But, I think it's important to note that only 58% allowed users to perform the key tasks of the site. In other words, the other 42% are basically crippled. Another thing to note is that only 16% of sites that are broken let their users know that the site is broken without Javascript in some form or fashion - this is actually a really easy thing to fix, one could do what Stack Overflow does and just put up a flash banner on the top of the page, and be done with it. What this shows is that the developers of these sites either didn't tested the site with Javascript off, or just didn't think this was important enough to fix.

See this spreadsheet for all the data in one place.

Conclusion

What have we learned? Well, if you insist on turning off Javascript, the web isn't going to be much fun. It should be noted however that the ecommerce sites (and serious web designers) are the ones that take this very seriously.

As for the Javascript library that I am building: I plan on releasing it soon. I think maybe what I'll do is to let Javascript-enabled be the default mode of operation, but given a fallback option, albeit somewhat more complexed one.

var arr = [12, 3, 24]

arr.sort()

arr

arr.sort(function(a, b){

  return a - b

})

function memoize(f){
    var cache = {}
    return function(){
        var keys = []
        for (var i = 0; i < arguments.length; i++){
            keys.push(typeof(arguments[i]) + ':' + String(arguments[i]))
        }
        var key = keys.join('/')
        if (key in cache){
            return cache[key]   
        }else{
            var val = f.apply(null, arguments)
            cache[key] = val
            return val
        }
    }
}

function f(x, y){

  return x + y * 2

}

f = memoize(f)

f(3, 4) => 11

f(3, 4) => 11

typeof(one) == typeof(other)

String(one) == String(other)

-Djava.awt.headless=true

-d32

VMARGS="-Xmx1024m -Dsun.io.useCanonCaches=false"

VMARGS="-Xmx1024m -Dsun.io.useCanonCaches=false -Djava.awt.headless=true -d32"

// map
function(doc){
    emit(null, doc.info.size) // in place of doc.info.size, you'd put whatever

                               // value you want averaged here
}
// reduce
function(keys, values, rereduce) {
    if (!rereduce){
        var length = values.length
        return [sum(values) / length, length]
    }else{
        var length = sum(values.map(function(v){return v[1]}))
        var avg = sum(values.map(function(v){
            return v[0] * (v[1] / length)
            }))
        return [avg, length]
    }
}

// the map function
function(doc){
    for(var i in doc.tags)
    {
        emit(null, doc.tags[i]);
    }
}

// the reduce function

function(key, values, rereduce){
    var hash = {}
    if (!rereduce){
        for (var i in values){
            var tag = values[i]
            hash[tag] = (hash[tag] || 0) + 1
        }
    }else{
        for (var i in values){
            var topN = values[i]
            for (var i in topN){
                var pair = topN[i]
                var tag = pair[0]
                hash[tag] = (hash[tag] || 0) + pair[1]
            }
        }
    }
    var all = []
    for (var key in hash)
        all.push([key, hash[key]])
    return all.sort(function(one, other){
        return other[1] - one[1]
    }).slice(0, 3)

}

    addPropertyToType: function(ty, propName)
    {
        var c = propName.charAt(0);
        var setterName;
        var getterName;
        if(c >= "a" && c <= "z")
        {
            getterName = "get" + c.toUpperCase() + propName.substr(1);
            setterName = "set" + c.toUpperCase() + propName.substr(1);
        }
        else
        {
            getterName = "get" + propName;
            setterName = "set" + propName;
        }
        function setter(val)
        {
            this.bridge.setPropertyInAS(this.fb_instance_id, propName, val);
        }
        ty[setterName] = setter;
        function getter()
        {
            return this.bridge.deserialize(this.bridge.getPropertyFromAS(this.fb_instance_id, propName));
        }
        ty[getterName] = getter;
        if (ty.__defineGetter__)
            ty.__defineGetter__(propName, getter);
        if (ty.__defineSetter__)
            ty.__defineSetter__(propName, setter);
    },

app.getTextBox()

app.textBox

require 'webrick'
server = WEBrick::HTTPServer.new :Port => 1234
server.mount "/", WEBrick::HTTPServlet::FileHandler, './'
trap('INT') { server.stop }
server.start

require 'webrick'
class NonCachingFileHandler < WEBrick::HTTPServlet::FileHandler
  def prevent_caching(res)
    res['ETag']          = nil
    res['Last-Modified'] = Time.now + 100**4
    res['Cache-Control'] = 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0'
    res['Pragma']        = 'no-cache'
    res['Expires']       = Time.now - 100**4
  end
  
  def do_GET(req, res)
    super
    prevent_caching(res)
  end

end

server = WEBrick::HTTPServer.new :Port => 1234
server.mount "/", NonCachingFileHandler , './'
trap('INT') { server.stop }
server.start