Posts about Tech

A Different Approach to Email

toby ho — Wed, 08 Jun 2011 00:30:53 -0500

In Tim Ferris' book the Four Hour Work Week he shared the tip of minimizing the number of times you check email in a day. One reason that this approach is beneficial is because it will minimize the distraction from looking at the inbox.

Yes! The Inbox is Distracting

Let me give you an example. You want to write someone an email. So you open up Gmail(or your mail program of choice). The first thing you see is your inbox. Oh! An old pal just added you on Facebook! Or, oh! Someone sent you a pull request! Your next impulse is to go add your friend on Facebook or to take a look at the pull request: it'd only take a couple of minutes. If you are someone who can resist that urge, good for you. But I usually can't. And even when I can resist the urge to actually do those things, I usually can't resist thinking about them. Half an hour later, I am usually serving the web or writing an email to someone else and have forgotten what I was doing in the first place.

Maybe the problem is the high level of in-your-face which the inbox possesses. My first attempt was Gmail Peepshow: a Greasemonkey script that initially blocks the view to your inbox. This solution didn't end up working very well, both because of how hard it is to manipulate the Gmail dom and its inflexibility, as I will explain.

Only Check Once A Day

One solution is to minimize your email checking frequency to say, once a day, as Ferris suggests. For me at least, this works out well most of the time, and keeps me focused. I have turned off push notifications on my phone(if you are hooked on push, you might try doing w/o it again, you might feel liberated), and only check email once a day, and try to take action right away at that sitting.

But...

However, there are occasions when the thing you are working on requires you to correspond with someone via email, and worse, because you want to close the loop on the task ASAP, sometimes you want to be quickly notified when the correspondent replies. So, that means repeatedly checking your inbox again.

It dawned on me that the solution was to separate the urgent correspondents from the rest of your inbox. Even better would be if push notification only notified you if the urgent email comes in. After chatting with my wife about this, she seems to think I can implement this behavior using only Gmail filters, and so I got to work.

The Solution

The first thing to do is make a filter rule that removes everything from the inbox except for ones that come from the urgent correspondents.

Matches: -from:{ vip@superimportant.com }
Do this: Skip Inbox

This rules says for anything but emails coming from vip@superimportant.com: skip the inbox. If you need to add another correspondent, you can just add them one by one within the {}'s.

Matches: -from:{ vip@superimportant.com vip@alsoimportant.com }
Do this: Skip Inbox

What we've done is reserved our inbox only for our VIP's. But now, what about the other unread mail?

I am going to create a label to simulate a second inbox - the one I check once a day. I will call it @daily (The @ sign is just so it will be sorted to the top). Basically, everything can go into @daily, so my rule could be

Matches: from:(*)

Do this: Apply label "@daily"

But, here I could add a rule to filter out the bacn I get from Delta and Borders, for example

Matches: -from:{ e.delta.com e.borders.com }
Do this: Apply label "@daily"

If I want, I could add yet another rule/label, maybe @weekly, for all the bacn or less important stuff that I might still want to look at at a lower frequency.

Pros. Cons.

An advantage to using the main inbox for only the urgent stuff is

you will only see the urgent stuff when you open up Gmail - nothing that distracts
you can use push notification on your phone now and only get urgent notifications - for my iPhone, I've turned off the sound for whenever any mail is received(so I am not distracted), but the little number at the corner of the "Mail" icon shows me the inbox number . For Android I hear the integration is even better.

The only drawback of this approach is that you will have to maintain the "Skip Inbox" filter rule - every time you change who your urgent correspondent(s) is/are, you need to go in and change it. For me, this would be every time I start an urgent task that requires a correspondent, and when I finish that task.

Conclusion

I think this is a novel approach to approaching email. But there's no conclusion yet because I have only begun using this. Will blog updates if I learn anything new in the process.

Questioning Windows and Tabs

toby ho — Thu, 06 Jan 2011 22:11:54 -0600

How many application windows do you have open right now? What about the number of browser tabs?

The Limits of the Multiple-Window Paradigm

The multiple-window user interface paradigm that we all know and love was invented at Xerox Parc. Both Apple and Microsoft used it in their products and now every computer user in the world lives it and breaths it.

More recently, there was the rise in popularity of the tab-based user interface. In particular, every major browser now supports tabbed browsing. To me, this indicates that the multiple-window paradigm isn't working well. In particular, it just doesn't scale when there are many open windows. Let's back up: it's not the having of the windows themselves that don't scale, the OS is happy to open as many windows as you want

but it's you who don't scale. Human beings can only hold a maximum of 7 things in their head at any one time.

Strategies for Taming Many Windows

When you have lots of application windows open at the same time. What are some strategies for making sense of them?

Alt-Tab and Cmd-Tab

On Windows, the Alt-Tab keyboard shortcut cycles through all of your opened app windows on Windows. On Mac, there's the Cmd-Tab shortcut, which rather cycles through all of your opened applications; then the Cmd-` shortcut cycles through all your windows within the current application. In practice, Alt-Tab or Cmd-Tab switching only works well if you are switching between 2 or 3 windows at most. Also, both of these implementations appear to be inadequate for power users for there exists the Alt-Tab Replacement Task Switcher for Windows and Witch for Mac.

Taskbar and the Dock

On Windows XP, the Taskbar lists all opened application windows and lets you switch between the windows with a click. If there are too many of them, similar windows will be grouped into one - clicking on the item will slide out a list from where you can choose from within the group. In Windows 7, there's a new interface which I have only seen, not used, so I won't comment.

On Mac, there's the Dock. In contrast to the Taskbar, the Dock does not show all open windows. Instead it lists the currently opened applications as well as the currently minimized application windows. Neither the Dock or Taskbar scale up well when there's a large number of windows.

Exposé

On Mac, there's something called Exposé, which is yet another indication that neither the Dock or Cmd-Tab are cutting it

Exposé shows all your open application windows on the screen by scaling them down to the point that they can all by laid out side by side together in a sort of mosaic. You can click one of the thumbnails in the mosaic to switch to it. Exposé works well up to a point, but if you have too many windows open

you won't be able to make out which is which because the size of each window in Exposé will too small to read.

So, we have seen three strategies for handling many windows, but not one of them is up to the task.

Tab-Based Interfaces

At this point in time, all major web browsers have a tab-based interface. I don't know when exactly tabs first came into the scene. I want to say it was popularized by Firefox, let's pretend that it was. I am not entirely convinced that they are better than multiple-windows, but they seem to have taken over as the standard for web browsers and even text-editors and IDEs. These are some ways in which tabs may be superior than windows

Switching between tabs is easier because all tabs are readily readable and available at the top, whereas windows can easily occlude each other and although the Windows Taskbar has a similar function as tabs, it can easily fill up to the point of unmanageable if you have many application/windows open.
Tabs live within the space of that window only, isolating them from other applications and windows. You could take advantage of this to better organize your stuff or just to have a clean slate to work with despite the other mess lying on your computer.

Tab is the New Window

It is not uncommon nowadays to see people having more than 10 tabs open in their browser. My typical usage pattern is this: I usually start out with one or two tabs that are opened all the time, such as my todo list and email; then as I need to research something or am distracted by a link I'll add new tabs to the mix. This continues until I have too many tabs(my threshold is about 10 or so), at which point I decide to either create a new window and start over again or clean up the existing tabs. If I go for the tab clean up, I will go through each one, decide whether it's save-worthy, save to a bookmarking service if so, or close the tab if not.

It is as if I need to do periodic garbage collection as part of my web browsing experience. This. Is. Not. Okay.

People even less disciplined than myself do tab cleanups less frequently than I, and they come to rely on the state of the browser. If the browser crashed and lost its state, they would get upset, because they'd lost track of their work. The fact that most browsers now also restore their states across restarts helps them, but also further perpetuates this behavior.

Tabs may or may not be a improvement to multiple windows, but they do not scale either.

Multiple Windows and Tabs are Overrated

So if there's no way to work effectively with many windows or tabs, what is a user to do? Reduce, reduce, reduce. Most of the time, multiple windows and tabs are just not necessary. Some evidence of this are

many non-tech-savvy computer users - who don't even know about tabs - maximize their windows by default
smart phones and tablets of today don't have multiple windows and people - both tech-savvy and non-tech-savvy - find them usable
overlapping windows might look cool, but are pretty much useless

The only time when multiple windows are necessary is when you have a complex task at hand. We will talk about that a little later.

Why We Need So Much Stuff Open

Why do we - the computer users of today - have the tendency to open up an abundance of windows and tabs? Here is me trying to explain

slow start of applications: might as well leave them running so that we don't have to wait for them to start the next time around.
some apps just run in the background because they have to constantly check for or be notified by external events and react to them(chat apps, twitter, facebook, calendar reminders, mail notifiers, etc).
non-linear nature of thought processes: thoughts can easily change direction, either because of external events(a phone call, a Facebook reply, someone walking into your office) or internal events(a great new super-duper awesome idea).
sometimes, to efficiently perform a particular task, you simply have to switch rapidly between a small number of windows. For example, you are writing a program and you have constantly switch between your editor and some terminals from which you compile your code, run your code, debug your code, and so forth.

I'll go into more detail about each of these as well as strategies to counter them so that you don't have to go insane.

Slow Start of Applications

There is no escaping the fact that when an application is already in memory, it will start faster because to start it from scratch will mean reading from the disk, which is way slower than reading from memory. Furthermore, when you close the application, you usually lose the application state. So if you restart the program you'd have to start over: for example, re-opening files or projects or a re-navigating the app in a specific way. For these reasons, many people opt to just leave applications open even after they are done using them - this will allow them to switch back to the application more quickly should they ever need to use it again. In my experience, however, application start times have improved greatly in recent years both due to better hardware and better written software, so app start time is now much less of a problem than before. Many applications even restore to their previous state on startup (ex. Firefox, Chrome, Textmate), so the problem with application state is mitigated as well.

Background Applications

Some applications are simply designed to sit around indefinitely and alert you whenever they feel like it. An instant messaging application is one such application - it waits for incoming messages, and alerts you when it happens. There's nothing really you can do about these applications being open other to stop using them altogether - for some apps, this is not a bad idea at all. My recommendation is to use these applications very judiciously. For alert-based applications such as GMail and GCalendar Notifier, make sure you set it up so that only the events that truly deserve your attention trigger alerts. As an example, I personally have mail alerts disabled, but the inbox number displays in my menu bar so I can check it when I want to. Another example is, if you use Growl(Mac only) for notifications, you can configure which applications you allow alerts to come from.

Non-linear Nature of Thought Processes and Stacks

People's minds wander around constantly, this is what makes us creative and adaptive. However, it also makes us unfocused and scatterbrained. If you allow yourself to mindlessly wander to wherever you please, you won't get anything done. Furthermore, it's been shown that focusing on what you are doing directly increases your happiness(for more on that, you want to read Flow: the psychology of optimal experience). So, although thoughts tend to be non-linear, you want to establish some form of structure so as to prevent it from going astray. A logical solution is a stack. You first start with a top-level task; if there is something else you need to do - a subtask(research an API), or just a general digression(check twitter) - you push that task onto the stack; when you are done with the subtask on the top of the stack, pop the stack and return to the previous task. Neither the tab-based UI or the multiple-window paradigm directly supports this stack mode of operation that I've described. What that means is you are going to have to be disciplined and always close the window or tab behind you when you are done with a subtask.

Rapid Switching and Registers

There are certainly times you find yourself in a situation where you have to constantly switch between two or three overlapping windows. In contrast to the stack, I will call this mode of operation the registers mode of operation, because like registers in a CPU, you have to access a small number of things very frequently. If the windows in your "register" are overlapping, you could be in a sea of hurt because when the content of a large area of your screen completely changes, it takes a second or two to orient yourself to the new content. When you are switching windows rapidly, those one or two seconds really add up.

You can greatly ease the pain by tiling the windows in a non-overlapping way. A prime example of this is the IDE. Most IDEs divide the available real estate up into tiles, which allows you to see all the pieces of information all the time. Another example is a graphics editor - which includes a tool bar, a tool options panel, a layers panel, the image to be edited, and more. These two examples indicate that the register mode of operation is often needed for highly complex tasks. Note: when you are using one application that satisfies all your needs, you don't need multiple windows anymore. It's only when you don't have an application specifically built for your task that you need to use the window tiling strategy.

Previously, we made the assumption that you only have a small number of windows in your register. What if there are more than a few windows you need to switch between? Again, people can only hold about 7 things in their head, so you are not likely going to work well with a large number of windows anyway. But, if by chance you are a genius and can handle it, you can get a bigger monitor or use more monitors like Trader Mike.

Experiment to Try

I've said some bold things: am I full of bull? You can test it out yourself. Try this experiment

Never leave any more than one browser tab or browser window open
Only leave open the applications that you are currently using. When you are done with a task, close out any applications that you are no longer using.

Do this for a minimun of 48 hours on regular work days and see if you are missing anything. At first, this may take some getting used to, here are some tips to smooth out some rough edges

If you are using applications that can restore their state, configure them to do so.
Many advanced web applications(like GMail) can restore their previous state as well and work perfectly with the back button - so there's no reason for you to have to leave them open all the time.
If you need a reminder to return to something, rather than leaving a tab or window open, use a todo list. If you don't have a todo list app that you already use, you can just use a text editor. You should be able to open and close this todo list quickly.
If you can afford to, stop using applications which take a long time to start or do not restore their previous state.

If it doesn't work, I'll give you your money back. That's right, I'll pay you back in entirety the amount of money that you paid me, no questions asked ;) Happy working!

Tutti - Multiple Browser Interactive Javascript Shell

toby ho — Thu, 09 Dec 2010 14:42:43 -0600

Cough, cough...

Have you ever wished that the Firebug console or <insert your favorite Javascript Shell> could execute the piece of Javascript you typed in on IE, or maybe some other browsers as well - at the same time?

Well, now you can!

Now there's Tutti - a Javascript Shell that will lets you execute Javascript on multiple browsers - all at the same time!

Here's how it works: to get started,

Open tuttijs.com in your browser
Create a new room (click).
Copy-n-paste the URL from your current browser window to another browser of your choice, say, IE 8.
Repeat step two for each browser you you want to test.
Type in some Javascript, hit ENTER, and see them results from all your browsers!

Tutti uses Socket.IO, node.js, and WebSocket technology - it's so just cloud™!

Tutti supports on all major browsers, including

Firefox 3.6 and 4
Chrome 8.0
Safari 5.0
Safari 4 Mobile for iPad
Opera 10
Internet Explorer 6, 7, and 8

Tutti is open source, but that's not all, it's also hosted on GitHub so you can download it and run it on your own machine, or better yet: fork it and hack on it to your heart's content!

Try it now!

To try it go to tuttijs.com, or get the source at http://github.com/airportyh/tutti. Remember dependencies such as Socket.IO-node, ExpressJS, node.js are installed separately.

Update: I've changed the domain to tuttijs.com. The old domain is still accessible though.

Running More Than One Version of Firefox At the Same Time

toby ho — Mon, 06 Dec 2010 10:35:26 -0600

Finally figured out how to run multiple versions of Firefox simultaneously.

First, you need to create some profiles, one for each Firefox version you want to run. Run

<path-to-firefox>/firefox-bin -ProfileManager

On Mac that's usually:

/Applications/Firefox.app/Contents/MacOS/firefox-bin -ProfileManager

Doesn't matter which version you use to open the profile manager because the profiles are shared between all the versions, and so you only have to create the profiles once. I called my profiles: FF4, FF3, and FF2 respectively.

I installed my different versions under these locations

/Applications/Firefox4b.app
/Applications/Firefox3.app
/Applications/Firefox2.app

Once you have the profiles created, you can launch each version like such:

/Applications/Firefox4b.app/Contents/MacOS/firefox-bin -P FF4 -no-remote &

for Firefox 4 beta,

/Applications/Firefox3.app/Contents/MacOS/firefox-bin -P FF3 -no-remote &

for Firefox 3, and

/Applications/Firefox2.app/Contents/MacOS/firefox-bin -P FF2 -no-remote &

for Firefox 2, just cuz I can.

Now of course, that's quite a lot of typing to have to do each time you want to launch the browser so I put those one-liners into handy little shell scripts which you can do too.

Happy happy joy joy!

For other platforms it's more or less the same thing, just the installation paths would be different.

See more detailed info about running multiple versions of Firefox on different platforms.

MOG vs Thumbplay

toby ho — Wed, 21 Jul 2010 21:58:18 -0500

I just learned about these two new-ish online streaming music services. This post will be a comparison of the two, in much the style of my old e-music vs rhapsody post.

First a word about my experience with Rhapsody. The verdict is: I tried it for a few months, and then cancelled. Ultimately not being about to play on my iPod(the iPod Classic, that is - actually this was before it was branded Classic), was the deal breaker.

The landscape has changed, on-demand streaming is the new model - it's just a matter of time. Why streaming? Well, downloading music and managing your own music library introduces several problems:

the overhand of managing the library
the overhead of syncing the music to and between different devices(mobile devices, home media center)
finite disk space - although harddrives are pretty cheap nowadays, the space on mobile phones are still very limited, this makes syncing even more problematic because now you need to decide on what subset of your library you want to put on your phone

On-demand streaming services promise to deliver huge music collections to you anywhere you go for a flat monthly subscription fee. You are always just a search and click away from listening to music you've never heard before - music discovery is going to blossom like never before.

Pricing

Anyways, enough philosophizing. What is the bottom line? Both of the services cost $9.99 a month with unlimited streaming and downloading. MOG also has a $4.99 PC-only plan.

Selection

I made a list of several lesser known artists whom I love, and used them as the benchmark for testing the breath of the two services' music library. Here are the results:

The table tallies the number of albums that were listed under each artist on each of the music services. The result in terms of total albums was a tie: 86 to 86. However, MOG faired better in the number of artists with at least one album: 16 to 13.

iPhone App

Thumbplay's iPhone app is more polished, but MOG's was just released a couple of days ago, and they are actively working on it.

Intangibles

The race is tight so far, but how does each service stand out and how do they differ? Short answer: MOG is focus on the web experience while Thumbplay is more focused on the desktop experience. MOG has a web-based UI, and social features such as sharable playlists, and blog posts. Thumbplay has a native UI, which should integrate better with the Apple Remote, but seems to lag behind in social features. I personally like the social features in MOG, and am thinking about doing a music listening blog within it.

Sound

I did a side-by-side comparison of "Let's Do It Again" by The Brand New Heavies on both services. To my ears, MOG has the better sound quality - both the bass and tremble sound crisper than Thumbplay with my Bose headphones.

Streaming Limit

Both services do not seem to limit the number of computers or devices you use with it, however, both of them allow you to stream to only one of them at a time.

Verdict

As of now, MOG is my favorite. However, it's still early days. There are big players waiting to get into the game(Apple, Spotify), and it's anyone's game.

UI Round Up: Too Many Tabs

toby ho — Sat, 03 Jul 2010 05:48:47 -0500

The UI paradigm of layout out things horizontally - such as tabs or the toolbars - is by now commonplace. But with this design there is a painful drawback: what do you do when you run out of horizontal space? Since, I am about to have to implement something like this for work, I did a little research on how this problem is handled. The representative sample I chose are Firefox, Safari, IE 7

, Chrome, and TextMate.

Firefox

In Firefox, there's a minimum width beyond which the tabs will not shrink. Tabs that cannot fit into the real estate are hidden, but can be gotten to via the left and right scroll arrows(on the left and right of the tabs) or via the tab drop-down icon on the far right.

Safari

Safari works similar to Firefox, except that it does not have the left and right arrows.

IE 7

IE 7 has everything Firefox has, plus a thumbnail view button on the far left, which when clicked will show you all your tabs as thumbnails in the content area.

Chrome

Chrome is the most curious of all. It will display all of your tabs, regardless of how many of them you have opened, or whether or not you can read the title of the tabs.

TextMate

TextMate - the only non-browser in my sample set - handles this much like Safari, except that in the "extra tabs" drop-down, checkmarks next to an item indicates that the file is the one currently displayed in the editor, whereas in all the browser UIs we've seen, the currently displayed tab is always made visible on top.

Reading On the iPad

toby ho — Thu, 01 Jul 2010 15:45:12 -0500

First up, iBooks didn't work for me. Most of the books on my reading list were not available there. However, most of them were available on Kindle, and you can read any Kindle book on the iPad by downloading the free Kindle app. Does Amazon care that you are not reading them on a Kindle? No at all, since you are still paying for every book that you read.

So I tried reading a Kindle book: Emotional Design by Donald A. Norman. What I found is that reading on the iPad is the best reading experience there has ever been: far better than physical books of any form factor. Molly Wood did not do it any justice.

Why I Disagree With Molly

Molly's main complaint was that the iPad is too heavy to hold like a book - with two hands holding in front of your face.

My answer to this is simple: don't hold it like that! What I have found to work best for me is to set the display at a larger font size, so you don't have to hold the device close to your face in order to read it comfortably. I usually put the iPad on my lap flat:

or slightly till it toward me by crossing my legs:

or propping up my legs:

This works so nice because one of the nicest features of the iPad is it's cool operational temperature - I would never do this with my Macbook Air. If I feel real lazy, sometimes I lie all the way down on my side and hold it up side ways with one hand.

Why it's Better Than a Book

The reading experience of the iPad is decidedly better than a real book. With a book, well, you usually have to hold it up with two hands, which puts strain on your arms and your palm. If you decide to hold it with one hand, you will contort your fingers in a strange way to try to hold the pages down which will strain your palm even more, to turn a page you'd most likely still require two hands. If you hold the iPad the way I prescribed, you are not really holding it with your hands at all, so no strain, but even better than that, turning a page is a matter of a tap or a flick of a thumb! In fact, when you are sitting comfortably reading with an iPad, the only thing you'll ever have to move is one finger.

Another advantage that the iPad - and eReaders in general - have over books that is rarely mentioned is their accessibility for the visually impaired. In short: old people don't read so good. My mom returned a paperback book because the print was too small for her to read. With an eReader you can set the font size to what's the most comfortable for you.

It's All eBooks From Here

That's it. I've decided. I will never buy a book again unless I absolutely have to.

Dark Desktop and Productivity Tools for Mac

toby ho — Fri, 09 Apr 2010 22:56:24 -0500

I "Went Mac" exactly one year ago. For the most part, I am a happy camper. Mac is not without its problems, but it clearly has smoother edges than Windows. This post will be reminiscent of my Desktop Cleaning post, only now "I am a Mac".

Today I decided that I was tired of spending time resizing windows on my Mac. It wasn't great in Windows either, but at least it was easier in that you could drag any of three sides of the window. On Mac, the only way to resize a window is to drag its lower right corner. What I needed was a tiling window manager, something like xmonad. Unfortunately, xmonad is only for Linux. Yes, you could get it to run on Mac, but it'll only work for X11-based applications - which are the minority of what I use on a day to day basis. I did some research and found an app called SizeUp. SizeUp allows you to tile windows using keyboard shortcuts. For example, you can make the current window occupy the left; right; top or bottom halves of the screen. You can also make it occupy each of the four quarters of the screen. You can also center a window, full screen a window, etc. If you use multiple screens, there are also shortcuts to move a window between the screens. All the shortcuts are configureable, and you will want to play around with configuring them to know what works for you, because honestly, the defaults are "a bit shit".

Another problem I have been having with the Mac experience is task switching. In Mac, the task switcher can switch between different programs, but not between the different windows within programs - unlike in Windows. You can switch windows within the active program using Cmd-`, but it's not as nice an experience as there isn't any indication of how many windows there are or what their names are. For this problem, Witch fits the bill. Witch is basically an advanced task switcher for Mac (for Windows there is the Power Toys Task Switcher). It does let you cycle through all the windows of all the active applications. It also shows you the names of all the windows.

Well, those are two Mac productivity apps that I think are worth the money. But last and not least here's a tip for making your desktop dark. If you go into System Preference -> Desktop & Screen Saver, you'll see Solid Colors as an folder under what you can select to be your wallpaper. Unfortunately for me, black is not an option. To make a dark wallpaper - well, it's obvious really - I just created a one-pixel-sized black image and used it as the wallpaper. There you go. Here's a screenshot of my dark desktop with Witch opened on top of it:

How Much of the Web Actually Work Without Javascript

toby ho — Thu, 11 Mar 2010 03:52:53 -0600

Recently Paul Boag showed dissatisfaction at the fact that most ecommerce sites don't work without Javascript, which stand against progress enhancement. Coincidentally, I am just now in the middle of working on a Javascript library that aims to make using CSS3 features and writing cross-browser CSS easier. So this got me thinking...

I love Javascript! I won't make any secret of this. I also love writing ajaxy web applications. Although I allow that there's value to making your site work without Javascript, to me, at least, it bares a lower priority. Of course, as is always the case, the answer depends very much on your target audience. Google Docs, for example, is more of a software tool than a web site, and so it wouldn't really make sense to make it work without Javascript - the result probably wouldn't be very useful anyway, because the essence of Google Docs, is the UI.

However, to consider the applicability of my Javascript library, I must consider whether it is acceptable to web designers that their design requires their users to have Javascript enabled.

And so, I resolved to survey how some of the major web sites and web applications look like and work like with Javascript disabled, so as to get a sense of what is the accepted norm on the web today.

The Contenders

I want to survey really popular sites. I also want to survey some content-centric sites, as well as some utility-type web-apps. The list has a Web 2.0 slant to it, but also include some old timers. Without further ado, the list is:

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.

Can users navigate the site? (1 point)
Can users read/view the content? (1 point)
Is the site free of broken visual elements? (1 point)
Can users perform the key tasks of the site? (1 point)
Is the site free of broken input elements? (1 point)
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO(video section)
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? NO(digg button broken)
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.

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

Facebook's score: 3/6.

Twitter

Twitter looks great without Javascript, but guess what? You cannot tweet! Bummer. You also can't edit some of the settings in your profile.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? NO
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO
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!

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? YES
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:

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? YES
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? YES
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? YES
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? YES
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.

Can users navigate the site? NO
Can users read/view the content? NO
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? NO
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?

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? YES
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...

Can users navigate the site? NO
Can users read/view the content? NO
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? YES
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.

Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO
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.

Can users navigate the site? NO
Can users read/view the content? NO
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? NO
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.

Can users navigate the site? YES
Can users read/view the content? NO
Is the site free of broken visual elements? NO
Can users perform the key tasks of the site? NO
Is the site free of broken input elements? NO
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.
Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO
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.
Can users navigate the site? YES
Can users read/view the content? YES
Is the site free of broken visual elements? YES
Can users perform the key tasks of the site? YES
Is the site free of broken input elements? NO
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 sites 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.

My Work Mail Filter

toby ho — Tue, 09 Mar 2010 12:14:06 -0600

My company recently switched to Google Apps. One of the implications of this is that I can use Gmail's mail filters. Since - like many company - I get a daily plethora of list emails, I thought I'd create a simple rule to filter them down to only the ones that require my attention.

Attempt #1:

Matches: -{Toby}
Do this: Skip Inbox

This rule says that if the email does not have my name in it anywhere, then skip the Inbox(like Google Search, "-" is the NOT operator). This worked fairly well, but I found that there were some false positives after a week or so of using it. So it needed some tuning up.

Attempt #2:

Matches: to:(-my@company.email) -{Toby Birthday}
Do this: Skip Inbox

I found that once in a while, there'd be a message addressed to me directly, but would not have my name in the message. I fixed this by putting -my@company.email in the To field of the filter(replace my@company.email with your own email). So, this filter will only apply to mail not addressed directly to me - the ones sent to mailing lists, basically. Also, I'd like to be notified of people's birthday, so I added the word Birthday to the doesn't-have list.

Attempt #3:

Whenever I request support, I always first get a message first that says: Thank you for your support request. This is pretty uninformative, so I don't need to be alerted to them. So I added the rule:

Matches: from:(our@support.email) Thank you for your support request.
Do this: Skip Inbox

That's what I've got so far. This post will be updated as I further fine tune my mail filters.

Update: I found that it's a bad idea to ignore the email HR sends out the the mailing list, so I modified the first rule to let her in:

Attempt #4:

Matches: to:(-my@company.email) -{Toby Birthday} from:(-hr@company.email}
Do this: Skip Inbox

Say No to Syncing

toby ho — Fri, 12 Feb 2010 18:13:57 -0600

If you are a podcast listener like me, you have probably accustomed yourself to connecting your iPod to your computer everyday to get your new podcast episodes. This is a big hassle, but in the age of the iPod, this made a lot of sense. You sync your podcasts, just like you would sync your music collection, because the only way to get your media onto the iPod was through the USB cable. Apple also did a great job of integrating the podcast experience into iTunes and the iPod, their podcast listening experience was second to none.

Enter the iPhone. And later the iPod Touch as well as other smartphones which came into the market to compete with the iPhone. These new devices are internet enabled, and so they possessed the power to download the new podcast episodes by themselves, and thus the daily chore of syncing podcasts can be eliminated. With the RSS Player app you can catch new podcast episodes for your favorite podcasts directly on the device - no need to connect to a computer or go through iTunes at all. On the Android platform, there is Listen and a handful of other apps which do the same thing, and so G1, Droid, and other Android phone users can enjoy this convenience as well. But my guess is that most people are still syncing podcasts. Why is that? You ask.

Apple rejected what came to be the RSS Player app at first. They saw it as stepping on their own turf. Not long after that, they allowed users to download specific podcast episodes directly from their device, but still no automatic updates. Why they didn't add that feature is very puzzling to me. To me, Apple is still hanging on their dock-n-USB paradigm, which - in my opinion - will go out of fashion very soon. Case and point: the iPad. Why would the iPad need a dock connector? It's freakin' ridiculous. You may say: they want you to use iTunes. To that I say: you can use iTunes on the iPad. You may say: it needs to sync with the music collection. Then I say: you should be able to sync over wi-fi! I also predict - and I am not the only one by far - that on-demand music streaming is going to obviate the need for the syncing of even your music collection in probably 2-3 years. Who knows, Apple might even be the one pioneering that movement, given that they've bought Lala.

And so, to smartphone or iPod Touch users who are still syncing podcasts, I'd say this:

Stop pushing the button.

My Thoughts on the iPad

toby ho — Fri, 29 Jan 2010 01:33:07 -0600

I've followed engadget's live blog, seen the keynote video, listened to Tom and Molly talk about it, even read others' opinions on engadget, gdgt and twitter, etc etc. I guess you could say I am pretty excited.

The tech savy(engadget, gdgt, BOL, etc) are in general underwhelmed or disappointed. Below are some of the complaints I have heard:

No Webcam or microphone - which pretty much rules out using Skype on it, which would have been a great killer app at this form factor. I think they will add these to the iPad in the future. Update: actually, there IS a built-in microphone, so at least you can make audio calls with Skype.
Still No Flash Support - you cannot seriously claim it has the best web browsing experience when it doesn't support Flash! Apple has not allowed Flash to run on the iPhone all this time. Now that they are doing the same with the iPad - which with it's larger screen you would think would be much better suited to run Flash apps, and add to it the fact that Flash has never ran great on Macs, it's becoming obvious that this is political. Apple wants to fight a format war with Adobe. Why would you need flash when you can buy great apps from the app store and buy TV shows and movies from iTunes? On the other hand, I can also see the concern that almost all of the flash apps out there(possibly with the exception of Flash ads) just aren't designed for the touch screen, and having users run them on the iPhone or the iPad degrades the user experience and therefore could hurt the products' reputation. Apple's PR, however, is going with: "it could rapidly drain battery life", which I think is probably in reality 3rd or 4th down on their list of concerns.
No multiple tasks/apps/windows - this is a pretty big one: given the iPad's screen real estate, it seems artificially limiting to not allow multiple apps to be running in separate windows. I believe the iPad will eventually have this feature. How the UI will turn out will be interesting to see.
The App Store Sucks - Apple prevents certain types of applications from entering its App Store. One example is programming language interpreters; another is any app that Apple views as overstepping their core apps' boundaries. Given that the iPad is even more of a computer than the iPhone, these limitations may become even more glaring.
I just don't see the need - "I already have a laptop and a smartphone, there just isn't any more room for yet another device!" I think that at the moment the iPad is more exciting for developers than consumers, but that will change.

All the negatives are well and good, but I overlook all of them, because, from my point of view, the iPad - and what it will lead to - is much bigger. All of the tablet computers I've seen in stores in the past - HP's, Fujitsu's, etc: they all suck. These computer manufacturers created tablet computers but installed on them an Operating System which is design from the ground up for use with a mouse and a keyboard. They figured: "A tablet computer has a stylus. We can use it as a pointing device in the same way that a mouse is a pointing device. We just hook up the stylus driver to control the pointer, and boom! We got ourselves a tablet Operating System! Brilliant!" This is understandable, because it is the nature of software engineers to want to build solutions that solve as many problems as possible - and Windows is a very very big solution indeed. However, this tendency also causes brilliant people to routinely produce crap. The tablet form factor is more versatile than the mouse, and can be much more natural to use from a UI standpoint, but dumbing it down and retrofitting it to an inferior UI paradigm caused it to be marginal. Yes, you could use a tablet to draw, sign documents, take notes, etc, but when it came to interacting with the UI elements, it was usually very kludgy.

iPad is the first tablet I've seen that comes close to realizing the potential of the tablet form factor. Why? It's all about the software, stupid! The software that come with the iPad were designed and written specifically for the large multi-touch screen device. This is to take nothing away from the amazing hardware. Multi-touch was ground breaking when it first surfaced. When the iPad comes to market, it will be the single best showcase of multi-touch technology. But, the software is what brings it all together, and you can tell Apple put a lot of time and effort into the software. Okay, enough of my rambling. What am I really trying to say?

iPad marks a historical step towards our liberation from mouse pointers and a paradigm shift in computer technology.

I hereby reiterate my prediction that in 5 to 10 years, mice will be on the way to extinction.