Winston{yw}

I have a lot of ideas, but as everyone (including myself) says:

Ideas are Cheap

Ideas are only worthwhile when you execute.

Lately, I have been feeling the urge to turn some of my ideas into reality, because:

• I want to scratch my itches, and verify that my ideas are useful.
• I should continue to code and code, and learn and learn.
• I am awed and inspired by May Day, Rework, and friends.
• I hope to find alternative / passive income.

Anyway, I have decided to focus on one of the many ideas, and it’s a secret for now. The idea may not be anything grand, but I believe (and hope) that it solves a problem, and will be something useful for the target market.

I’ll post my progress as often as I can, and hopefully, I’ll be able to reveal it soon.

For a start, I registered the domain name last night.

Now, to start designing the database schema..

These are the slides I presented at Singapore Ruby Brigade meetup on 14th April 2010, updated and uploaded to SlideShare. Enjoy!

Resources

• GoogleVisualr Source
• GoogleVisualr Reference/Examples

In Wego, we have our own analytics and billing tool that I started building 2 years ago. This tool, in short, observes and logs user behaviour, digitizes and processes the data, then reports it on a Ruby on Rails front-end.

I named the tool aptly, Wegonomics.

Anyway, the very first version of Wegonomics only has numbers in rows and columns, and the metrics displayed were simply just a count of actions grouped by date.

However, I soon realized that a good and useful analytics dashboard is not only about the visual diarrhea of every possible numbers in tables.

What is a good analytics dashboard?

• A good analytics dashboard provides insight to the numbers.
• A good analytics dashboard highlights patterns and trends.
• A good analytics dashboard helps one digests the numbers easily/quickly, and draws brilliant conclusions and decisions about them.

What’s essentially missing are charts – visual helpers for the numbers!

My initial search for a great-looking charting tool brought me to Open Flash Charts. Indeed, a useful charting tool! However, the Ruby on Rails libraries were disappointing, and it’s actually a hassle to integrate OFC into my system.

In the end, I found Google Visualization API, a Google developed JavaScript library that enables adding of charts into any web page.

In fact, the API actually powers quite a number of visuaizations in Google Analytics, which means I can recreate a Google Analytics look for my dashboard easily too.

This is the perfect solution for a great-looking and full-featured charting tool!

However, I need an easier way to integrate Google Visualization API into my system, without having to write data manipulation logic into RoR’s views or JavaScript files.

GoogleVisualr

Therefore, I created GoogleVisualr – a Ruby library for the Google Visualization API.

The Gist

In your model or controller, write Ruby code to create your visualization.

Configure your visualization with any options as listed in Google Visualization API Docs.

In your view, just call a visualization.render(div_id) method and the library will magically generate and insert JavaScript into the final HTML output.

You get your visualization, and you didn’t write any JavaScript!

Limitations

GoogleVisualr is created solely for the aim of simplifying the display of a visualization, and not the interactions.

Hence, do note that GoogleVisualr is not a 100% complete wrapper for the API.

To be precise, visualization-specific Methods and Events for use after a visualization has been rendered in a View have not been implemented (and may never be?), because they felt more native being written as JavaScript functions, in views/.js files.

Install

Clone the GitHub repository into your app/vendor/plugin folder.

> rails my_app
> cd my_app
> script/plugin install git://github.com/winston/google_visualr.git

Basics

1. In your Rails layout, load Google Ajax API in the head tag, at the very top.

<script src='http://www.google.com/jsapi'></script>

2. In your Rails controller, initialize a visualization with an empty constructor.

@chart = GoogleVisualr::AreaChart.new

3. Populate visualization with column headers, and row values.

# Add Column Headers
@chart.add_column('string', 'Year' )
@chart.add_column('number', 'Sales')
@chart.add_column('number', 'Expenses') 

# Add Rows and Values
@chart.add_rows(4)
@chart.set_value(0, 0, '2004')
@chart.set_value(0, 1, 1000)
@chart.set_value(0, 2, 400)
@chart.set_value(1, 0, '2005')
@chart.set_value(1, 1, 1170)
@chart.set_value(1, 2, 460)
@chart.set_value(2, 0, '2006')
@chart.set_value(2, 1, 1500)
@chart.set_value(2, 2, 660)
@chart.set_value(3, 0, '2007')
@chart.set_value(3, 1, 1030)
@chart.set_value(3, 2, 540)

4. Configure visualization with options.

@chart.width  = 400
@chart.height = 240

5. In your Rails view, render visualization.

<div id='chart'></div>
<%= @chart.render('chart') %>

Documentation and Example

The above is a basic example of getting started with the GoogleVisualr Ruby library. For more alternatives and examples in instantiating/configuring your visualization, please visit the reference site at http://googlevisualr.heroku.com.

Current available visualizations are:

• Annotated Time Line
• Area Chart
• Bar Chart
• Column Chart
• Gauge
• Spark Line (Image)
• Intensity Map
• Line Chart
• Map
• Motion Chart
• Organizational Chart
• Pie Chart
• Scatter Chart
• Table

Contribution and Support

The source of GoogleVisualr is available on GitHub. Go head and clone/fork it!

Please also submit all feedback, bugs and feature-requests to GitHub Issues Tracker.

Resources

• Google Visualization API
• GoogleVisualr Slides

Lately, I have been trying to migrate my Gmail workflow from Firefox to Google Chrome because of its speed. Everything’s good, except that since I am so used to my own Greasemonkey script: Gmail Unreads Summary (absolutely essential for a zero-inbox), I always felt a little handicapped in Google Chrome.

As I was sometimes asked the possibility of making a Google Chrome extension for the Greasemonkey script too, I decided finally to do just that.

Therefore, I present my 1st Google Chrome extension !

Since this extension is actually a remake of the Greasemonkey script which I wrote, the functionality is essentially identical. Thus, quoting from it..

The features of this extension are:

• Summary of unread emails in your current view.
• Emails are grouped by sender, with count, sorted in descending order.
• Every group is a quick link to filter emails by sender.
• Easy to use!

Hope it just made you more productive!

Update (29-03-2010)
I just pushed an update to Google Chrome Extensions gallery which fixes a few bugs. In addition, the sender groups are now sorted by count, in descending order.

Update the Google Chrome extension now!

Firefox is a great browser and I can’t live without it, because of all its useful plugins. However, every so often, Firefox will devour all the memory on my MacBook and become so slow, that I’ll be forced to issue a “kill -9″ command.

Today, I have had enough, and so decided to go find some Firefox optimization tips that will help to speed up my Firefox. The following are 3 simple steps to make your Firefox fast again, consolidated from sources as listed at the bottom of this post.

Hope you’ll find this reference useful, and FYI, my Firefox is amazingly fast again!

1. Optimize Firefox Database

• Menu > Tools > Error Console
• Paste the following in the Code box, press “Evaluate”, and wait.

Components.classes["@mozilla.org/browser/nav-history-service;1"].getService(Components.interfaces.nsPIPlacesDatabase).DBConnection.executeSimpleSQL("VACUUM");

This vacuums the SQLite database, and is the most significant in speeding up Firefox! Remember to do this periodically.

2. Limit Your History Sizes

• Menu > Preferences (Mac) / Options (Windows) > Privacy Tab
• Set “Remember my browsing history for at least ? days” to a small number. Personally, I set mine to 10.

As for “Download History”, I also unchecked the option, because I have no need for it.

3. Change Settings in About:Config

• Type about:config in your urlbar.
• In the Filter box, search for the following names and edit them accordingly.

Browsing and Session Settings

browser.sessionstore.max_windows_undo

A positive integer indicating how many window closures to remember for later possible restoration. (Default is 3)

Suggestion: Reduce to 1

browser.sessionstore.max_tabs_undo

A positive integer indicating how many tab closures to remember for later possible restoration. (Default is 10)

Suggestion: Reduce to 4

browser.sessionhistory.max_entries

Number of pages stored in the history of your browsing session. Basically these are pages that can be reached using your Back and Forward buttons. (Default is 50)

Suggestion: Reduce to 10

browser.urlbar.maxRichResults

A non-negative integer corresponding to the maximum number of entries that can appear in the Location Bar auto-complete dropdown. (Default is 12)

Suggestion: Reduce to 6

browser.sessionstore.interval

A positive integer indicating the number of milliseconds between session saving operations. (Default is 10000, or 10 seconds)

Suggestion: Increase to 150000, or 2.5min

Networking Settings

network.http.max-connections

This integer preference takes values between 1 and 65535 inclusive, directly corresponding to the maximum number of HTTP connections Mozilla can have open at once. (Default is 30).

Suggestion: Increase to 48 or 96

network.http.max-connections-per-server

This preference takes values between 1 and 255 inclusive, directly corresponding to the maximum number of HTTP connections Mozilla can have open at once. (Default is 15)

Suggestion: Increase to 24

network.http.max-persistent-connections-per-server

This preference takes values between 1 and 255 inclusive, directly corresponding to the maximum number of HTTP keep-alive connections the application can have open at once to a single server. (Default is 6)

Suggestion: Increase to 12

network.http.pipelining

Attempt to use pipelining in HTTP 1.1 connections

Suggestion: Change to TRUE

network.http.pipelining.maxrequests

Any integer from 1 to 8 inclusive determines the maximum number of requests to pipeline at once. A value of 1 disables pipelining. (Default is 4)

Suggestion: Increase to 8

Resources

• Vacuum Firefox Databases For Better Performance, Now With No Restart
• Speed Up Firefox By Limiting History Size
• Optimize Firefox’s Memory Usage By Tweaking Session Preferences
• The Ultimate Guide To Speeding Up Firefox 3.5

I was at the bookstore recently browsing along the Marketing section, and I observed a recurring theme in most of the marketing references: Customer Service.

What is “Customer Service”? According to Wikipedia:

.. is a series of activities designed to enhance the level of customer satisfaction – that is, the feeling that a product or service has met the customer expectation.

Customer service is also a business strategy, and providing excellent customer service is key to growing a business. Since, such a strategy definitely helps to retain your existing customers and to grow your customers base through word of mouth.

That’s definitely one of the oldest trick in any marketing reference, but do all businesses care about customer service?

Given that I am in the web industry, do all websites care about customer service?

Customer Service = User Experience

In the web context, I simply equate customer service to user experience, since both serve the same purpose of ensuring that a customer / user is happy with a product or service.

Therefore, for websites to succeed, providing excellent user experience should be of the utmost priority, as this can lead to more returning visitors, and more new visitors (by word of mouth). Websites win when they have a high volume of visitors, as monetization is always easy when there’s traffic.

As simple as the logic sounds.. However, many websites fail in user experience design, and users suffer as a result. Luckily, there are always alternatives (or clones!) to any website, and so suffering users can be unforgiving and simply go to an alternative with a better user experience design.

A simple conclusion from this is that websites should always focus most of their resources on creating a wonderful user experience in order to retain and grow the traffic.

I Don’t Really Care

I hear you say: “Ultimately, our website survives on advertising revenue. I don’t care about user experience, and I’ll just focus on getting more advertisers.”

Hmm.. Who will want to advertise with you when all of your users have left for another website with a better user experience? Probably there isn’t such “another” website now, but that means you are always vulnerable to that possibility, right?

Google: The Case Study

Take Google as an example. Their main source of revenue is from advertising too, but do they only focus their resources in getting more advertisers? The answer is: No. Google is constantly evolving their search and results interface, in order to give their users a great user experience. Imagine that Google has a small search box with multiple options, and ads and sponsored links are everywhere (above the fold, eye-leveled, etc) in their search results making it difficult to discern real content from ads. Will you like it? Will you search for alternatives that offer you a much better user experience?

The point is, Google knows what users want. Google neither assumes nor imagines what users want. Commonly known as actual usage vs. perceived usage. A user’s objective when visiting Google is simply to ask, learn, compare and leave, and that’s what Google is enabling all users to do, quickly. They display the search results clearly and prominently, and there are minimal distractions in terms of ads and options that would obstruct a user’s objective.

In terms of each search result content, Google doesn’t try to show you everything they know too. They display just enough crucial information that can either pique your interest, or help you make comparisons and draw conclusions. Essentially, displaying more information doesn’t always equate to easier evaluation of results. Haven’t you heard of information-overload? And when more information is actually more useless information, that’s even worse!

Features, that’s part of user experience too. Don’t get carried away with including all the features into the UI, or with adding the next-new-shiny-feature which was seen on another website. Again, understand who your users are and what your users want. Are they mostly power users or first-timers? Do they use all the existing features? Do they need the next new feature? Always measure and evaluate the effectiveness of every feature. Kill the ones that only serves as distraction to your users, or even worse, as distractions to your development team as they need to spend time to maintain something that only contributes to 1% traffic. Google have done so, by publicly announcing that they will stop all developments on Google NoteBook, and in this context, although it’s more like killing off a product rather than a feature, the idea permeates.

Even though I have been using Google exclusively in my examples, that’s not to say Google is perfect. They are not, but Google has demonstrated successfully that devoting resources to user experience is worth the effort. Even till today, they are constantly measuring and improving their UI to give all of us a greater user experience.

User Experience Is Important

Anyway, so you have accepted the premise that user experience is important. What should you do now?

Eat your own dog food. Imagine that you are a first-timer to your website and go through all the entry points to your website. Does your website helps you, as a first-timer, to answer, learn, compare and draw conclusions to your questions from these entry points?

That’s not enough.

Ask your employees the same question. They are your best assets even before you should consider seeking advice from a consultant.

Ask your users the same question. They are the ones who are using your website! Gather as much feedback as possible from your users, through feedback boxes easily accessible from every page of your website, and reply to your users in a timely manner, as that’s user support and is a part of user experience too.

The purpose of all these? To understand your users, and so to be able to create a wonderful user experience that users want and users like.

That’s basic customer service, you know.

For any Dreamhost questions, I always refer to the Wiki which is excellently compiled. However, I realised that the Wiki has either an outdated answer or simply failed to answer the question of “How to set up a Git Repository on your Dreamhost account”. Thus you can sort of ignore this page on the Wiki.

My goal is to set up a private repository for my own WordPress theme, so that I’ll have version control and a complete change log for all developmental work on the theme. Another benefit in this is that I can sync the theme easily with my WordPress install, without having to do any FTP uploads (while figuring out which files were changed).

To set up Git repositories on Dream is actually quite easy, and I’ll recount how I did it. In the shell code examples below, USER refers to your user name on Dreamhost, while EXAMPLE.COM refers to your domain.

Step 1: Create A Dreamhost Repository

Firstly, I created a sub-domain to store my repositories, and I used .htaccess to protect it from the general public.

Both of these can be done from the Dreamhost Panel by following these two wikis:

1. Adding A Subdomain To Your Dreamhost Account
2. Configuring .htaccess

Then I entered shell, browsed to the sub-domain which I created in the step above, and created an empty repository with these commands:

$ mkdir my_wp_theme.git
$ cd my_wp_theme.git
$ git --bare init
$ git --bare update-server-info

Step 2: Create A Local Repository

Next, I created a local repository on my development machine, which will be later published to the Dreamhost repository.

$ mkdir my_wp_theme
$ cd my_wp_theme
$ git init

Configure the local repository with the Dreamhost repository details.

$ git config push.default matching
$ git remote add origin ssh://USER@EXAMPLE.COM/home/USER/SUB.EXAMPLE.COM/my_wp_theme.git
$ git config branch.master.remote origin
$ git config branch.master.merge refs/heads/master

Step 3: Push The Contents

Following which, I copied over my WordPress theme files into this local repository. Then I added, committed and pushed my changes.

$ git add .
$ git commit -m "Initialization."
$ git push --all
$ git pull

Step 4: Sync With WordPress Install

To sync with my WordPress install, I browsed to <wordpress>/wp-content/themes and cloned the repository.

git clone ssh://USER@EXAMPLE.COM/home/USER/SUB.EXAMPLE.COM/my_wp_theme.git

Then I went into the WordPress Admin and activated this gitorised theme. Done!

In the future, when I am finished with any changes to my theme, all I have to do is: Push my changes, then pull the changes on the server.

The most “famous” that I ever got (on the Internet) was getting a mention on both Download Squad and Techmeme in 2006, and that was a great achievement for me! All of it began with a Greasemonkey script that I wrote, which basically integrates Google Reader into Gmail.

Back then, I merely shared my script on Google Reader’s Google Group, but I got an encouraging reply from David Chartier who was then a blogger for Download Squad. Soon, the script got a dedicated post on Download Squad, written by Jason Clarke. Surprise, surprise! After which, more people came to know of the script, and it was delicious-ed a total of 144 times. By the following day, I was listed on Techmeme. Wow! Techmeme! Have you EVER been listed on Techmeme?!

Anyway, I soon neglected the maintenance of the script due to other commitments, but a few others continued to make further improvements to my Greasemonkey script. Eventually, the functionality of the script was acknowledged by Gina of Lifehacker, and one of the improved version was included into the Better Gmail Firefox extension. Even though I was not named as the author of the script, but I was still able to see that I was credited in the comments section of the script, and that’s good enough for me.

Just an egoistic post to document one of my (lesser-known) greater achievements, and I wonder if I’ll ever achieve such “fame” again.

What about you? What’s your claim to fame?

I am a heavy-user of Gmail and Google Apps, and I spend most of my day in either’s web interface. The great thing about using the web interface is that I can either customize it with Gmail’s Labs feature, Firefox extensions or Greasemonkey scripts. Lately, I encountered this problem with my inbox which I felt warranted a scripted solution, and so, I spent a little time to get acquainted with Greasemonkey again and wrote a simple one.

First, the problem.

The thing I dread most with opening my inbox every morning is that it’s always flooded with (duh?) emails. The speed at which emails are being sent nowadays is astonishing! After every night, my inbox is usually packed with emails from colleagues, partners, applications (automated notification), newsletters, spam and others. That’s a night’s worth, so consider my feelings after a long weekend.

Anyway, just for the record, I LOVE to adopt a zero-inbox policy, and I archive my emails VERY, VERY LIBERALLY, so if my inbox is teeming with 30-40 unread mails, that’s considered “full” or “flooded” to me. =)

To tackle the flood, I started with filters and that helped, but I am still not satisfied. Every morning, I’ll start the day in my inbox and traverse down the long, long list of unread emails to read, reply, archive or delete. However, at any single point in time, I’ll only know the number of unread emails I still have in my inbox, and no further details about these emails. Hmm.. Is there anything that I can do?

And now, the solution.

An idea struck me this morning, and I decided to give it a try. After tinkling with Greasemonkey scripting and Gmail’s Greasemonkey API for a while, I present to you: Gmail Unreads Summary!

The features of this Greasemonkey script are:

• Summary of unread emails in your current view.
• Emails are grouped by sender, with unread count.
• Every group is a quick link to filter emails by sender.
• Easy to use!

Download Now!

Anyway, my original intention is to create a summary for ALL the unread emails in your account. However, it’s impossible to get all that information from the client-side? Therefore, as a workaround, the summary view is only for the CURRENT VIEW which you are looking at, and the summary changes when you paginates or change views.

Give it a try! Any feedbacks? Would you like to see any other summary details?

Hmm.. I wonder if this is worthy of Gmail Labs..

Update (20-08-2009)
I have removed the “Close” functionality and replaced it with a “Toggle” functionality. This is because the “Close” functionality is buggy (as it used a GM value?) when installed as a Firefox extension. Download the script again. Thank you!

Update (29-08-2009)
I have made some bug fixes to the script to improve your overall user experience. Firstly, search urls will now make an in-browser refresh and not a full-browser refresh. Secondly. emails with “+” are now searchable too. Download the updated script. Thank you!

Update (30-08-2009)
As reported by users, the “minimize” functionality is not sticky after changing views. Therefore I have updated the script to ensure that your preference is remembered. Download the updated script. Thank you!

Update (11-09-2009)
This script has been integrated into the Firefox add-on: Better Gmail 2 since Aug 18th. Thanks to Gina of Lifehacker!

Update (20-09-2009)
This script has been removed from the Better Gmail 2 extension since version 0.9.4 because I am using a new Greasemonkey function (@require) which is somewhat incompatible with the extension. Please install this as a Greasemonkey script instead.

Update (26-11-2009)
The Gmail Greasemonkey API broke (possibly due to changes within Gmail itself), which caused the Greasemonkey script to stop functioning. I have just fixed the bug, so go ahead and download the updated version. Thank you!

Update (16-02-2010)
The Gmail Greasemonkey API broke again. I have fixed two of the broken functions, but not the third, and so, my script has lost the functionality of “auto-refresh”. However, I have added a “Refresh” link, so that refresh can still be done manually. Hopefully this is a good-enough fix for now. Please download the updated script. Thank you.

Update (21-02-2010)
In this update, I have renamed the “Refresh” link in the last update to “Refresh GMUS” and have shifted its position – putting it just beside Gmail’s own “Refresh” view link. Download the updated script now. Enjoy!

Update (21-03-2010)
I made a minor update to the code and bumped version up to 0.2.1.

AND.. I released a Google Chrome extension of the same functionality! Hurray!

Update (29-03-2010)
I just pushed an update to UserScripts.org which fixes a few bugs in the last release. In addition, the sender groups are now sorted by count, in descending order.

Download the updated script now. Thank you!

Lately, I have been thinking of ways to organize and consolidate my online activities. This is largely because I have a distributed footprint in a number of online services, and this distribution is somewhat random and messy. I’ll like to have some guidelines so that I’ll know where to post, what to post and how to post. Thus, birth of this post.

Currently, FriendFeed is doing a wonderful job in aggregating all my online services, and so I will continue to leverage on this core functionality. However, at the same time, I want to categorize my online activities and target them to different audiences, and hopefully with this categorization, I’ll have answered the three questions above.

Starting with this blog, I shall continue to do my geeky writings on Winston{YW} since that has been the main focus of this blog. Moreover, I already have a few geeky posts here that are ranked highly in Google searches and these posts continue to bring in a stream of fellow-geeks, whom I suppose are only interested in other geeky writings.

In addition, I am going to create a multimedia blog, which will contain my very own images, videos and sounds. Posterous seems to be the oh-so perfect choice for this, as I can simply email my multimedia files to the service and my files will be magically converted and hosted intelligently, as an image gallery, or a video/music player! That’s really simple, as compared to a self-hosted WordPress blog.

For a start, I’ll be using Posterous as a replacement for Twitpic, since this service is able to auto-post to Twitter (and other services) and it’s a nicer archives of my images. Next, I’ll be posting random photos taken with my (newly-bought!) Panasonic Lumix LX3 onto Posterous too.

Posts from these two blogs will be fed into FriendFeed, along with services such as Twitter, Delicious and Google Reader for an aggregated and commentable view. Unless you are not subscribed to me on FriendFeed, you are probably already overwhelmed by my activities-stream.

However, I know that not everyone gets FriendFeed, and you might only be interested in my blog/s. Therefore, I’ll be offering not one, not two, but THREE RSS feeds:

• The 1st feed is for this blog.
• The 2nd feed is for my multimedia blog at Posterous.
• The 3rd (default) feed is a combined feed of the two feeds above, courtesy of Yahoo Pipes.

As for Twitter, I’ll continue to use it to stream my daily life, retweet interesting tweets, share funny videos and socialize with the crowd. Are you interested in “stalking” me? Join Twitter and Follow Me. That is where I am spending most of my time.

What about my Facebook? I have installed the Selective Twitter app on Facebook, so that any tweets with a hashtag of #fb will be piped into Facebook as well. In this way, I’ll also be able to interact with my Facebook friends when I tweet.

That’s the gist of my online strategy for now, and as trivial as it sounds, I actually spent quite some time mulling over it. Let’s see how my plan will evolve over time..

Do you have an online strategy of your own?