So if your in Canada and want to watch Hulu from USA, this is your chance to do it :) Head to the gallery to download Proxy Anywhere Chrome Extension! As always, the source code is open source at GitHub, fork and pull in your patches :) https://github.com/mohamedmansour/proxy-anywhere-extension

Some screenshots!

Problem with git-svn

• Doesn't convert it as a bare repository, sure we can just look into .git folder.
• It doens't respect the standard layout for tags and branches. You have to pass those values in.
• Doesn't allow you to use an irregular layout. For example, it doesn't understand if you have two trunks, or folders in root. We have to just stick with trunk, branches, and tags. Nothing more.
• It doesn't even understand what a tag is, it treats it as a branch. You have to create a script after its complete to manually tag those branches that should have originally been branches.
• SLOW, flithy slow!

History

I didn't give up finding a better way. Even though it worked, I kept on searching online for alternatives. Every single script and solution that users have created use git-svn. Where are you Google, you didn't help at all! I was more curious how the bigger organizations have done the conversion. First thing that came to my mind was KDE. I remembered KDE becuase I used gitolite before and they were on the list of adopters.

KDE is very old open source "true" project. When I mean "true", I mean, everything they do is in the public. I respect that in the highest level. Every feature they create, they communicate with the community. Every decision they make, the community is involved. Absolutely no corporate black box that is hiding how they do their project from the community, unlike many projects that I have seen. By saying these words, makes me super excited that I wanted to contribute to KDE. KDE converted their 64GB SVN repository in around 1 hour! I screamed in my mind when I heard that, 1 HOUR!!!! It took me around 10 hours to convert 1GB. Since they are open sourced, they documented every step along the way!

Native svn2git

They called it, svn2git (the real one, too many fake clones out there that I tried and all use git-svn), and they have a nice wiki to explain how it is done http://techbase.kde.org/Projects/MoveToGit/UsingSvn2Git

It is a C++ Qt application that communicates directly to the SVN repository. It is super fast, when I mean super fast, I converted my 1GB SVN repository in a matter of minutes, under 5 minutes! From 10 hours to 5 minutes! This hidden tool is so powerful that it should really be known.

How to use it

In Red Hat Enterprise, it is a pain I had to modify some code to backport it to Qt 4.0. RHEL don't support Qt 4.7, they just support Qt 4.0 which is quite sad. But luckily, the code for svn2git was open source and beautiful! Easy to understand and easy to know where everythin is. It was my first time looking at Qt code, and to tell you the truth, it is beautiful!

Running it is pretty simple, all you have to do is:

qmake && make
./svn-all-fast-export --rules samples/standardlayout.rules ~/svn/

Within a few minutes, the whole SVN including their tags, branches, and trunk converted! git-svn didn't do that!

Yes, I am super happy, I can now create complext rules to convert my SVN repo to a multiple Git repos to make the organization better.

Some history

Since the very beginning, Chromium was using SVN as its main repository, then around a year later some Chromium devs (Evan Martin and others) started to support Git and used git-svn to commit back to Chromium repo. Msysgit wasn't performing well, it was causing too many problems with git-svn, since it wasn't fully supported. The tooling in Chromium is all done in Python to make it cross platform with Linux/Mac/Windows and its pretty great! Some parts of the code are just checking for cygwin explicitly causing msysgit not to work. After my frustration with cygwin, with Marc-Antoine's help, we fixed msysgit issues and eveything works well. Really well!

Analysis

To tell you the truth, on Windows, it feels snappier and less hassle to work on Chromiums source code with msysgit than cygwin. It feels faster and natural. I was curious to see how well it improvement, and performed. So here are the averaged timings of 5 trials. Some pre info:

• Windows 7 x64
• 4GB RAM
• Secondary HD
• Latest Cygwin updates installed.
• Cygwin Git 1.7.4
• Msysgit Git 1.7.3.1

Table timings

As shown above, the timings improved quite a bit. Around 50% to 100% on the operation. It does feel snappier. I no longer have to wait 2-3 seconds waiting for the "git status" to show up on a warm start. Even on a cold start status, the timings improve quite a bit with msysgit.

So what does user+sys represent? Basically, it tells us how much actualy CPU time the process used. It is quite significant ... Cygwin uses way more CPU time than msysgit. Okay, not that much just around one second. But still, you get the point.

Conclusion

Not only you get speed improvements with msysgit, you get stability improvements too. For example, cursor annoyances, copy paste screw-ups, terminal freezes, random locking annoyances, etc are all not visible anymore. I have been using it for around one months now, and no issues so far :) As a bonus, the msysgit shell starts up super fast!

Table of Contents

• Introduction
• Messaging to communicate from Facebook to the Worker tab back to the extension.
• Content Scripts to extract your friends data quickly.
• HTML5 Offline Database Storage to cache your friends.
• OAuth to export to GMail
• Conclusion

Introduction

You can download the extension from Chrome Web Store and the source code is hosted on GitHub (feel free to fork, send patches, and help me improve it)

Within the media, it has been concluded that Facebook owns your friends most valuable data, their email address. In my opinion, the reason why Facebook became so popular is because of "us", we allowed them to export our friends and connect to them by extracting our friends from Hotmail, MSN, Gmail, Twitter, etc. But the reverse was not possible, there was no way for us to export them back. Absolutely no way! I invited many, many, people to Facebook through this process because I thought it was a neat concept and I believe in their vision. Facebook has grown so fast, that most of my in real life friends are on Facebook and not in my contact app (Outlook, Google Contacts). There is no way for me to connect back to my friends unless I do that within Facebook. It feels like Facebook is controlling the data that I have provided for them for free. That quite bothered me, hence the creation of this extension.

Without the original work from an anonymous person who hosted fb-exporter on Google Code (which is now blocked), I have used the source code, changed it dramatically, and made it easier, cleaner, faster, and safer to use. So whats new?

• A different approach to fetch your friends by directly communicating to Facebook's JavaScript Objects, and retrieving your initial friends information quickly such as Name, Image, and URL.
• Cached results, since it takes so much time to export your friends, some people might accidently close their browser, or want to continue the process some other time. That is now possible via HTML5 Web Storage.
• Not only emails are exported, it exports your contacts phone numbers, Google Talk, Yahoo, ICQ, Skype, QQ, and MSN (Windows Live Messenger) aliases. jQuery is beautiful when it comes to simplicity.
• It uses real time error handling, if something goes wrong, it will automatically figure out what that issue is and properly handle it.
• New User Interface, you can see a grid of all your friends with their profile photos. When you start the lengthy process, it tells you what is CACHED, READY, STARTED, PROCESSED, SUCCESS and FAILED! These status messages help the user know what is happening in real time. Thanks to Chrome Extensions Message Passing.
• The code is mostly refactored to make it cleaner and easier to use. As you noticed, the UI differs too. It is commented fully and restructured to make it easier on the external contributions.

Communications between Facebook and the Extension process

In Google Chrome extension, the only way to communicate to the DOM, is through Content Scripts. But there is only one problem, they have a couple of limitations that we need. Content Scripts cannot:

• Use variables or functions defined by their extension's pages
• Use variables or functions defined by web pages or by other content scripts
• Make cross-site XMLHttpRequests

Communication from the Facebook World to the Chrome Extension World

We need to access our main extension page because we want to transfer our data to Google Gmail Contacts through cross-site XMLHttpRequests. No fear, we can use Chrome's Message Passing to send messages back and fourth to our extensions background page, which is just an HTML page that runs in the extension process. It exists for the lifetime of your extension and only one instance of it at a time is active. Once we reach the extension process, we can send data back and fourth to Gmail as we please (of course, with the proper permissions set in the manifest. We want our users to know what the extension has access to.)

In fb-exporter, we actually use Chrome's Message Passing to communicate between both worlds, since they are isolated. It is really simple to setup. Within the Content Script we add add a extension listener, chrome.extension.onRequest.addListener, which in this case gets fired when a request is sent from the extension process (reduced snippet below):

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.getFriendsMap) {
    sendResponse({data: friendsMap});
  }
});

Communication from the Extension process back to Facebook

In the extension world's ( background page ), we maintain the Facebook's tab ID when the user first clicks on the "Export Friends" button on Facebook's navigation. When the "Export Friends" button is clicked, it sends a request to our extension process to tell it to open the main controller (that controls the steps for exporting your friends) window. We use chrome.extension.sendRequest to send the request to the extension process from the content script:

chrome.extension.sendRequest({switchToWorkerTab: 1});

So how does the background page listen for content script requests that comes from Facebook? The exact same way we discussed before with the content script:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.switchToWorkerTab) {
    facebook_id = sender.tab.id;
    chrome.tabs.create({url: 'controller.html', selected: true}, function(tab) {
      worker_id = tab.id;
    });
  }
});

What the above snippet states, when a request is coming in from the Facebook page via Content Script, we keep track of the ID's of those pages. We need those ID's so that we can send information back and fourth between different pages directly. It becomes easier to handle.

Then we can use chrome.tabs.sendRequest, to send a request back to Facebook Content Script and even back to the extension process:

chrome.tabs.sendRequest(facebook_id, { facebookError: 1 });
chrome.tabs.sendRequest(worker_id, { facebookError: 1 });

Using content scripts to read the internal JavaScript directly from Facebook

The traditional way of grabbing information is by screen scraping, but we are not doing that. If you used Chrome Web Inspector, you will notice an internal JavaScript variable hosted in Facebook is running the show. But there are some problems and limitations, as we discussed before. We cannot access that variable directly from our Extension and even our Content Script!

The only way the our extension can communicate to Facebook is through Content Scripts, and the only way Content Scripts can communicate with the embedding page is through the DOM. The DOM is what shared between both worlds, since they are completely isolated from each other.

To do this, we inject the Facebook page with a 'script' tag that creates a custom event. The custom event dispatches when friends object has been retrieved. We use custom events because everything is asynchronous. We want to inform the Content Script that we have successfully grabbed the object. If you are familiar with how Java does drag and drop, the concept of Transfer nodes are similar in this case (kinda).

// JS script injection to the facebook's World. This function can only be read
// in the Facebook world, it has absolutely no access to the content script
// nor our extension process.
var postFriendMap = function() {
  // Use events to notify the content script. Replicate the event the content
  // script has, so we can pass this event to that world.
  var exportEvent = document.createEvent('Event');
  exportEvent.initEvent('friendExported', true, true);
  
  // Create a transfer node DOM, since that is the only way two worlds can
  // communicate with each other.
  var transferDOM = document.getElementById('fb-transfer-dom-area');
  transferDOM.innerText = JSON.stringify(FriendSearchPane._data);
    
  // Inform our content script that we have received the object from Facebook.
  window.dispatchEvent(exportEvent);
};
 
// Create a dummy textarea DOM.
var transferDOM = document.createElement('div');
$(transferDOM).attr('id', 'fb-transfer-dom-area')
              .hide()
              .appendTo($(document.body));
  
// Start injecting the JS script.
var script = document.createElement('script');
script.setAttribute('id', 'fb-inject-area');
script.appendChild(document.createTextNode('(' + postFriendMap + ')();'));
document.body.appendChild(script); 

Our content script listens on that custom event so it will know, asynchronously, when we can start processing our list of friends. And the only way to transfer data through these two worlds is by the DOM as shown in the snippet above. A dummy transfer DIV is created on the DOM that both worlds understand.

// Listen on the real DOM requests to check if the friends list has been exported.
window.addEventListener('friendExported', function() {
  // Save the map to this content script world, so our extension can read it.
  var transferDOM = $('#fb-transfer-dom-area');
  friendsMap = JSON.parse(transferDOM.text()); // Global
  
  // Clean up since we no longer need this.
  $(transferDOM).remove();
  $('#fb-inject-area').remove();
  
  // Count the number of friends.
  var i = Objects.keys(friendsMap).length;
  
  // Tell the worker tab that we are set!
  chrome.extension.sendRequest({friendListReceived: 1, count: i});
}); 

The listener reads the contents stored in the transfer node, and deserializes it back so we can store it. It does all the cleanup afterwards since we no longer need it. Since we are in the content script, it asynchronously notifies the extension process that we have received the friends list.

Voila, we now have read the internal data Facebook has stored.

Caching of Friends using Web SQL Database

Caching friends is really important for any lengthy process. If computer restarted, tab closed, error happened, or anything strange happens, we don't want to redo the whole process again. The obvious way is to continue where we left off.

There are two ways to do data caching for a Web Application:

• HTML5 Local Storage
• HTML5 Web SQL Database (no longer active, IndexDB currently in Standards)

localStorage was initially going to be chosen, but the 5MB (2.5MB UTF) limitation was my reason of not choosing it. localStorage is just a key[value] synchronous storage mechanism, which is super easy to use. Unfortunately, 2.5MB is not enough to store all your friends.

Web SQL Database has the limitation as well, but you can override that limitation by specifying in the Chrome Extension manifest unlimitedStorage It is an asynchronous API that uses SQL syntax. Take a look at the database.js file in the codebase on GitHub. The following snippet is how getting a freind from the cache is done.

FriendDB.prototype.getFriend = function(id, response) {
  this.db.transaction(function(tx) {
    tx.executeSql('SELECT data FROM friend WHERE id = ?', [id],
        function (tx, rs) {
          if (rs.rows.length != 0) {
            response({status: true, data: JSON.parse(rs.rows.item(0).data)});
          }
          else {
            response({status: false});
          }
        }, this.onError
    );
  });
};

In the controller page, once the friends list is requested (so I can render my friends in the page), I iterate through all the friends, and check if each user is in the cache, if they are in the cache, I inform the Facebook page that a cache exists. A separate cache map is stored so when it comes to a time to process each friend, it skips that friend because the data is already in the cached map.

chrome.tabs.sendRequest(bkg.facebook_id, {getFriendsMap: 1}, function(response) {
  $.each(response.data, function(key, value) {
    bkg.db.getFriend(key, function(result) {
      if (result.status) {
        chrome.tabs.sendRequest(bkg.facebook_id, ({cached: true, data: result.data}));
      }
    })
  });
});

The beauty of having caching, it will result in a neat progress bar :) It isn't instant, because I am making an SQL call for each user. Sure, I can make one big SQL query that checks each ID, but this is cooler since it shows to the user something is happening :)- But it is on my TODO list.

Sending the data to Gmail Contacts

The extension uses OAuth (which is an open protocol to allow secure API authorization), Google Contacts API (yes its public, and you can import and export), and Google Data API (to transfer the data in a nice format)

I wont explain much here, all that is done here is saving the data in Gmail Contacts. We use the APIs mentioned above to do this securely. Of course, there is absolutely no way I can know your authorization, it uses OAuth for secure Authorization. The first thing that happens, it creates a group called "Exported from Facebook". There is some smart logic there that checks for duplicate friends, and only adds friends that are not there. You can later log on Gmail Contacts and organize your friends in more groups and merge contacts together (very neat UI).

Conclusion

Well, I am not hating on Facebook. My country, Canada, due to privacy laws, we own our data. Our data is private information, we cannot let Facebook control our data and own it. I like everything to be in the clear, and that is why I created this blog post, to show everyone how its done. Sure I spent numerous hours designing, developing, and debugging it (I have spent many hours behind my computer to make sure its right). But I am happy of the end result. All my contacts are safely in Gmail and I can happily contact my friends through other means, and synchronize my friends with my phones and computers.

I hope this post helped you understand the technology behind creating this extension, and will help you create your own in the near future. The Chrome Extension API is very very very amusing to work with :)

Google Quick Scroll

My most useful extension ever! I love exploring the web, Googling my way through many topics and entertainment. One of my most annoying actions for Googling before was finding out where in that large webpage the content I Googled. Quick Scroll lets you jump directly to the relevant bits of a Google search results. I absolutely love it!

Feedly

I subscribe to many RSS feeds, and Feedly is a real clean and easy to figure out User Interface. It understands my Google Reader account really nicely, and I enjoy reading my feeds on it in real time. I usually install the RSS Subscription Extension to figure out if a page has a feed or not, and if I like the author of that webpage, I know instantaneously know I can subscribe to it. If you have other RSS readers that connect nicely to Google Reader, please let me know.

Disconnect

I didn't ming when every website added those sharing buttons to every single post. But I really hated when third parties such as Facebook, Twitter, Yahoo, added some tracking information the webpages, such as Fans. I get really distracted from the website itself, and I don't use those features. Disconnect, really disconnects them from web. It really works! It uses the "beforeload" event handler so it guarantees those services will never make it to the website. I personally like to control the information I make public or visible, I don't like websites tracking me.

AdBlock

This is clearly the most popular Chrome extension. The title says it all, blocks ads all over the web. I actually enable Google search ads, I find them relevant. But every other ad, I really don't like, they distract me from the content, expecially those annoying "like dislike" Facebook Ads. Horrible! I somehow get offended seeing Facebook ads.

IE Tab =)

So why did I pick IE? Many corporate websites of mine don't work well with Chrome, or render well with Chrome. Since I am on the Canary version of Google Chrome, sometimes Chrome messes up rendering. By clicking a simple button, the renderer switches to an IE renderer on that page. It is useful for testing, to see if your website is compatible with IE. Would be cool if there were a FireFox and Opera plugin. Will make testing cross browser easier.

Some other extensions that I use

I don't use these extensions alot, but they are pretty cool, and I use them once in a while.

• exfm: Pretty neat way to discover music on the web and make it your library!
• Chromed Bird: One of the earliest Twitter clients, and if you use Twitter alot, this is pretty cool. It uses the whole Extension stack.
• Eye Dropper: I love colors, I am addicted to colours! When I explore the web, any color I see, I love saving it to my collection and experiment with it. I used to take a screenshot of my webpage, and open up my favourite image editor program and extract the colours from it. That becomes a hassle, Eye Dropper, solves it with one click.
• Chrome to Phone: I use my cell phone a lot, I am in a hurry usually, and I don't like interrupting what I am doing online when reading an article, watching a video, etc. This solves it, sends it to my phone instantaneously. I even like it when I select a phone number, it calls it :)
• JSON View: Many webservices are using JSON as their response, it is the easiest to handle in JavaScripts. Without this extension, viewing JSON data is ugly, you don't see the markup or the structure which makes JSON important. This extension solves that, you see a pretty structured JSON document if you visit it.

The extensions that I developed

Well, I created some extensions that helped me in some situations, but helped others greatly. I usually create extensions that people want, not necessarily what I want. Since I am active in the Chrome mailing lists and official Chrome forums, the result of these extensions were requested from users. Believe it or not, they wont use Chrome without these extensions :) Of course, as usual, everything is open sourced on my GitHub page!

• Reload All Tabs: Many people wanted a way to reload all tabs in their window, or all windows. But you couldn't do that in Chrome, while in other browsers you could. Initially I submitted a patch to do this natively, but it was rejected because they thought this is not a feature that many people want, which I agreed. When they implemented extensions for Chrome, I quickly made that, and it made many people happy!
• Set Image as Wallpaper: This was the most requested feature, thousands of people wanted it for over a year. This was an awesome feature to work with, a pretty complex one too. Every browser has an option to set an image as a wallpaper, except Google Chrome. This uses neat HTML5 technology to preview before setting it. You have options to Stretch, Center, Fill, Fit, and Tile. It was featured on many known blogs and praised by many. Believe it or not, I usually never used this feature on other browsers, but now I do :) Kinda cool changing your wallpaper every day or so.
• Open link in foreground tab: All links in Chrome opens in background, this will add a context menu to open a link in the foreground.
• Prayer Times: Muslim praying times schedule that uses geolocation to get the sunset and sunrise. It doesn't require an online connection to get the prayer times, and it has a complete month to month prayer schedule by a click of a button.

How to send a debug message to the browsers console

The best way to teach someone how to send a message back to the browser is with an example. Afterwards, I will explain each step in detail. So here is the JavaScript code that we want to call from our C++ plugin:

   console.debug("Hello from C++");
 

The equivalent C++ code for the above JavaScript would be the following:

  // The message we want to send.
  char* message = "Hello from C++";
  
  // Get window object.
  NPObject* window = NULL;
  NPN_GetValue(npp_, NPNVWindowNPObject, &window);

  // Get console object.
  NPVariant consoleVar;
  NPIdentifier id = NPN_GetStringIdentifier("console");
  NPN_GetProperty(npp_, window, id, &consoleVar);
  NPObject* console = NPVARIANT_TO_OBJECT(consoleVar);

  // Get the debug object.
  id = NPN_GetStringIdentifier("debug");

  // Invoke the call with the message!
  NPVariant type;
  STRINGZ_TO_NPVARIANT(message, type);
  NPVariant args[] = { type };
  NPVariant voidResponse;
  NPN_Invoke(npp_, console, id, args,
             sizeof(args) / sizeof(args[0]),
             &voidResponse);

  // Cleanup all allocated objects, otherwise, reference count and
  // memory leaks will happen.
  NPN_ReleaseObject(window);
  NPN_ReleaseVariantValue(&consoleVar);
  NPN_ReleaseVariantValue(&voidResponse);
 

The browser object

  NPObject* window = NULL;
  NPN_GetValue(npp_, NPNVWindowNPObject, &window);
 

The first thing we need is an NPObject representation of the browser object. From there, the functions in this API can be used to get and set properties and call methods on those browser objects.

The browser object in this case is javascript's window object. The window object represents the window itself, which we want to execute a property in our case the console. Console debugging is the default debugging messaging for Google Chrome and Firebug on Firefox.

To access the browser object from NPAPI, it is done by using an extension to NPN_GetValue(). The extension is the NPNVWindowNPObject enumeration. By calling NPN_GetValue with that enumeration, it will return an NPObject representing the browser object.

An NPObject is a structure that holds a pointer to an NPClass which is defined within your plugin. It is the type that is used to express objects exposed by the browser in this case. This is the entry point of what we need to execute in the JavaScript side.

So now we have access to the window object within the JavaScript DOM.

Calling the console property

   // Get console object.
  NPVariant consoleVar;
  NPIdentifier id = NPN_GetStringIdentifier("console");
  NPN_GetProperty(npp_, window, id, &consoleVar);
  NPObject* console = NPVARIANT_TO_OBJECT(consoleVar);
 

The plugin now has a pointer to the browser's window DOM object. Now time to call its' console property which allows us to call its functions such as, console.debug()

To do so, we need an NPIdentifer that identies the JavaScript string that we want to call. We can use the macro, NPN_GetStringIdentifier to quickly get the identifier for that string. That is used to tell NPAPI what to execute in the NPObject.

Since we have the window object and id identifier we can execute that property to retrieve the console NPVariant. The NPVariant is a struct that holds a value and the type of that value. Think of it as a JavaScript representation of a variable in NPAPI. It is the response that comes back from the browsers, in this case, it is just a console NPObject. Since we know its an NPObject, we can extract the NPVariant to an NPObject with the simple to use macro, NPVARIANT_TO_OBJECT

Invoking debug

  // Get the debug object.
  id = NPN_GetStringIdentifier("debug");

  // Invoke the call with the message!
  NPVariant type;
  STRINGZ_TO_NPVARIANT(message, type);
  NPVariant args[] = { type };
  NPVariant voidResponse;
  NPN_Invoke(npp_, console, id, args,
             sizeof(args) / sizeof(args[0]),
             &voidResponse); 
 

The final step is to invoke a debug function on the console NPObject returned by the previous step. We do the same thing we did before, we need an NPIdentifer that idenfies the javascript, in this case debug. Note, we reuse the same NPIdentifier id.

Since window.console.debug(message) requests a string parameter, as we discussed before, a parameter is just an NPVariant. To convert a char* to a NPVariant string, we can use a macro, STRINGZ_TO_NPVARIANT. All the NPAPI macros are defined in the NPVariant docs. You should read them, it is great to know which macros are available. Makes your life easier to use them.

Once we constructed our NPVariant args array, we can finally invoke the console NPObject defined earlier with the args we defined right now. The result would just be a void response.

Don't forget to cleanup!

  // Cleanup all allocated objects, otherwise, reference count and
  // memory leaks will happen.
  NPN_ReleaseObject(window);
  NPN_ReleaseVariantValue(&consoleVar);
  NPN_ReleaseVariantValue(&voidResponse);
 

As you all know, cleaning up unused pointers is critical to any C++ application :). Failing to do so in NPAPI, will result in buggy plugins that will crash. Yes, I said it, it will "really" crash!. So cleanup your window object, and your variants as shown in the snippet!

Conclusion

I hope you realize how easy it is to call JavaScript directly from NPAPI, once you understand the code involves, it becomes easy to do anything. Just be careful cleaning up afterwards, or you will have memory leaks and plugin crashes. I hope this article will benefit any of you, and I am excited to share my NPAPI journey with you in the near future!

My next article will be talking about the design and architecture of a NPAPI plugin, and what the future has with NPAPI. Google engineers are working hard creating future sandboxes plugins which are safer and easier to use such as PEPPER and NaCL (discontinued "kinda" in favor of PEPPER) :)

About

Using Steve Hanov's awesome RhymeRank^TM system, we created this simple to use Android App. Each result is grouped by a score that is separated by an orange line.

FAQ from RhymeBrain:

Quote...
Using advanced artificial intelligence techniques, RhymeBrain
figures out how to pronounce a word even if it has never seen 
it before. RhymeBrain then compares it to the 260,000 words
in its database to find ones that sound similar.
Finally, it sorts them so that the best rhymes appear first, using
our RhymeRankTM system.

Source

Screenshots

Download

It is on the Market right now, for free so please help me test it with all the unique devices out there. Scan this QR Code to download the app! Or search for RhymeBrain from the Market.

Why do we need a preloader?

Sure some websites are efficient at loading, but the download time might vary. If you are adding widgets as I explained earlier, you will see that it is quite annoying having this white space in the middle and just reappear. It degrades user experience and just does not feel right. By adding a very simple preloader to that iframe, the user will know something is going to happen in that area.

Small demo

Refresh this page and look at this area to see how it works.

The idea

It is pretty simple and straight forward! We create some sort of placeholder that contains our textual loader, in this case it will be just a div with some loading text.

At the end of the webpage, right before the body tag, we inject some Javascript to hide the frame and show the preloader. With a simple window load listener, we can know when the page has been fully loaded.

Once the page loads, we can hide the preloader and show the iframe. Voila, a simple preloader!

The code

On your main page, right before the end body tag you insert the following:

The iframepreloader.js is below:

/**
* Global Static Event Utilities helper that assists us to add
* cross platform events to any DOM object as well retrieving
* their target if any exists.
*
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
var event_utils = {
  add: function(obj, type, callback) {
    if (obj.addEventListener)
      obj.addEventListener(type, callback, false);
    else if (obj.attachEvent)
      obj.attachEvent("on" + type, callback);
  }
}


/**
* Preloads an IFrame since it may take time to load.
*
* @param {string} id The identifier for the Iframe you want preloaded.
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
IFramePreloader = function(id)
{
  that = this;
  this.id = id;
  this.iframe = document.getElementById(id);
  this.placeholder = this.createPlaceholder();
}

IFramePreloader.prototype = {

  /**
  * Initializes the preloader to wait till a load event occurs in the iframe.
  */
  init: function()
  {
    this.iframe.style.display = 'none';
    event_utils.add(this.iframe, 'load', function(e) { that.handleLoad(e); });
  },

  /**
  * Creates the placeholder for that Iframe.
  * @return {Element} The placeholder element.
  */
  createPlaceholder: function()
  {
    // Create placeholder.
    var newElement = document.createElement('div');
    newElement.id = this.id + '-placeholder';
    newElement.appendChild(document.createTextNode('Loading ...'));

    // Adding that placeholder right after the iframe. We first check if its the
    // last child, if so, we just append it. Otherwise, we insert it before the
    // next sibling.
    var parent = this.iframe.parentNode;
    if (parent.lastChild == this.iframe) {
      parent.appendChild(newElement);
    } else {
      parent.insertBefore(newElement, this.iframe.nextSibling);
    }
    return newElement;
  },

  /**
  * Show the frame, hide the preloader. Since it has been loaded!
  */
  handleLoad: function()
  {
    this.iframe.style.display = 'block';
    this.placeholder.style.display = 'none';
  }
}

Conclusion

As you have seen, it is very straight forward adding an indeterminate preloader to your iframe. Some may want images, flash, movies, or anything else. It is very easy to customize it. From the code above, createPlaceholder creates that placeholder. If you want an image, you can add an image easily there, same goes for any types.

If you have any questions, please let me know in the comments below or through email!

How to compile in Debian

Make sure you read the dev docs here http://dev.chromium.org/chromium-os/building-chromium-os , it works perfectly. So make sure you install:

1. Prerequisites
2. Download the Source Code http://src.chromium.org/git/chromiumos.git
3. And build!

In Debian make sure you have "qemu" installed (sudo apt-get install qemu), that is needed to create the image. And make sure you add sbin to your path (export PATH=/sbin:/usr/sbin:"$PATH" or it wont work. Thats all!

How it feels

Okay, it booted in 2 seconds in a VM! That is bloody quick. It seems slow in the VM but that is normal. It really seems like an unfinished product and many stuff hasn't been cleaned. Such as, many broken links (internal Google sites) still in tact. Keyboard shortcuts doesn't for many. The only thing you can make working is use the internet. Good for a start, I guess!

How to run Chromium OS

I used VirtualBox and VMWare Player, VirtualBox was very simple to use. All you had to do is follow these steps. Remember to download the virtual disk below:

Download Chromium OS (Root password: chrome)No longer exists.
Virtual Machine Disk Format (works on VirtualBox and VMWare Player)

Steps to run it:

1. Download from http://www.virtualbox.org/, its free and Open Source! Install it.
2. Create a new Virtual Machine.
3. Type any name (ChromeOS)
4. The Operating System should be Linux, and the Version could be Other.
5. Use an existing hard disk, point to the chromiumos.vmdk file
6. Thats it, press start!

chrome.exe   --enable-webgl

./chrome --enable-webgl

What is WebGL

WebGL is a JavaScript binding to OpenGL ES 2.0 for 3D Web Graphics without installing any web plugins. The Khronos Group (the creators/maintainers of OpenGL standard) working group includes many industry leaders such as Google, Mozilla, NVIDIA, Opera, AMD, etc to work on standardizing WebGL. The press release can be read here. WebGL is currently still in development, if you want to keep track of its status, you can star this issue: http://code.google.com/p/chromium/issues/detail?id=21852

But how is it different than Google's O3D?

Update: O3D decided to concentrate making HTML5 WebGL faster and better. O3D is now an open-source web API for creating rich, interactive 3D applications in the browser.

Quote...
O3D is not going away. WebGL is a very cool initiative but it has
a lot of hurdles to overcome. The direction of WebGL is trying to
just expose straight OpenGL ES 2.0 calls to JavaScript. 

JavaScript is still slow in the large scheme of things. Maybe at 
sometime in the future WebGL will have added enough features over
basic OpenGL to be more powerful or JavaScript  will have gotten 
a few orders of magnitude faster but at the moment…

…
The WebGL team at Google and the O3D team are currently the same
team. We have every interest in seeing both WebGL and O3D succeed.

Read Original Source ...

How to enable WebGL on Google Chrome / Chromium?

After you have subscribed to the Development channel, you would need to put some command line parameters when you launch Google Chrome.

1. Right click on your "Chrome" icon.
2. Choose properties
3. At the end of your target line, place these parameters:
   • --enable-webgl
4. It should look like: "chrome.exe --enable-webgl"

Now you have WebGL installed! Lets look at a cool example! This example of Escher Droste effect, where one image, rotated, thinking its zooming in forever. So cool! Take a look here: http://wakaba.c3.cx/w/escher_droste.html

Have fun WebGL'n!