Applying a multilingual interface on your webpages and allowing the change at the client side without the need for a server postback has never been easier using the technique I’ll describe in this post.
While developing Bloginto, I came across the situation of implementing an English-Arabic-French interface with the possibility to change the language on the fly (on the client side), so I used a trick so close to culture resource files in the .NET.
My first priority was to write the minimum of code using jQuery, and as you will see, it is *really* minimal.

1. Preparing the resources for the language

We will encapsulate the language resources with Javascript arrays, here is an example:
The getLanguageResources function returns an array that contains an associative key/value arrays of the desirable languages, notice how the same key is used for the different translations.

2. Preparing the HTML markup

We need to put placeholders for the multilingual text to show in the markup, I choose a <span> tag here, but obviously you can use whatever elements fits best. The trick is to have all these multilingual spans use the same name attribute (this is not a necessity neither, you can use whatever attribute you wish), and have them use another attribute, for example caption which value is the key of the text to show in the resource arrays.
We will also add two buttons to test the language change, here is the final markup :
Notice how the radio buttons for changing the language have values which are the keys of the resource language (the arrays).

3. jQuery magic

Now we will apply some jQuery code to associate the spans with their corresponding text from the language selected by the radio buttons
Here we attach a click event to the radio buttons, and we simply call the function changeLanguage whenever a button is clicked, we pass the value of the “value” attribute of that button to the function which represents the specified language (‘fr’ or ‘en’)
The changeLanguage function loads the corresponding array of the languages from the getLanguageResources function, then iterate through every element that has the attribute name “lbl”, and change its text to the value in the resource language array which key is the caption of that specified element (span), pretty simple!
As you can see, all the magic is done with 2 lines of jQuery, if you guessed that the “.attr()” method will do the same instead of “.each()” then you’ve guessed wrong, attr() applies only to the first element in the selection set. See .attr() specification here.

4. Demo

Her is a working demo http://jsfiddle.net/uUgWD/.

Bloginto is a Google Chrome extension that brings feeds from the Digg like websites called Bloginy for both the Algerian http://bloginy.com and the Moroccan http://bloginy.ma

Today I’m pleased to announce that the version 2.0 of the extension is here, you can install it from https://chrome.google.com/extensions/detail/jppmcmbnmodlmgbfdddmeopgagancoak or update it from the settings section in Google Chrome if you have already installed the previous version.

This new version $(‘was’).completely(‘jQuery’, ‘fied’), cleaner and reliable code has been introduced to make sure handling all the error cases by showing pretty informative messages to the user. Enough talking, here are the new features :

As you can see from the settings page :

• You can choose the default view, the Algerian or the Moroccan Bloginy, this has been present in the previous versions, but it has an impact on the notifications of the unread and new arriving feeds, you will notified only when feeds from the default feed arrive.
• The notification themselves : the number shows the unread feeds count, it will refresh automatically and change when you read feeds or new ones become available.
• Because you can vote on articles directly from the extension now, there is a section where you can save your user name and password for both, Bloginy.com and Bloginy.ma.
• Timeouts for the request, you should make this bigger if you have slow internet, and the feeds timeout, this is the frequency of checking new articles on the website.
• While reading feeds, you can mark them as read, and the extension offer you to hide read feeds, or just mark them with a different color.
• And most of all, it is now multilingual, you can change the language from Arabic to French to English, and it works on the fly (God bless jQuery), if you need to know how this is done, here is the code that does it all :p

  $("span[name='lbl']").each(function(i, elt){
      $(elt).text(l[$(elt).attr("caption")]);
  });   

  where l is the resources language;

The extension itself allows the marking/hiding of the read posts, live voting and twittering the posts directly from the extension. You can toggle hidden posts by clicking on the button at the top. To vote, you simply click on the “like” icon, to twitter… well you click on the twitter icon and to mark a post as read, you click on the description of the post.

Finally, I hope Bloginy will get a little active after making the voting available directly and eventually allowing multiple languages that may match the users tastes.

The code source is available on Google Code at this address : https://code.google.com/p/bloginto-chrome/

$(‘feed > back’).is({always: ‘welcome ;)’}) ;
Ramadan Mubarak for all, and that’s my present for you guys to spend more time “engaged” with the community.

Google pack is a set of software made available free by Google including programs by Google like Chrome and Picasa or other vendors like Mozilla Firefox and Adobe Reader. What is strange about the Google pack is its webpage, where it shows the applications you have installed on your computer and the applications that are not installed already.

The question that pops first is, how does a webpage knows what software is installed on my computer? I decided to see how does it work, inspecting Google’s coming-from-hell javascript files and trying to figure out how things are put together. To be honest, my motivation was first to know if I can use Google’s technique to leverage any information about other installed software on someone’s computer or not, and the answer I simply: no you cant, don’t bother.

Google’s pack webpage http://pack.google.com/ links to a javascript file and have some application parameters initialized at the page loading, with a notable array of guid ‘s and application names:

It turns out that Google stores information of the applications in the Windows registry (not exactly the same technique on other systems) at the path HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\. My research was mainly about how does the Javascript code figure out how to fetch these information from the registry and if it is possible to make it read information from other locations in the registry.

Using burp proxy to intercept and change the applications guid on the fly in the html page, I didn’t come to any result, and it turns out that the only information that is read from the registry was only from  inside HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\.

So the only trick left was to analyze the javascript file http://pack.google.com/cominst.js?2 (go ahead, take a look), if you want to try the code yourself, you can use the console in firebug under firefox or the Developer Tools (Ctrl + Shit + I) under Google chrome.

The javascript code defines some objects used to manipulate all the operations from reading the list of applications available, to fetching the applications already installed etc…

First a script on the page creates a _CI_Pack object named pack, this pack object have a property named plugin that contains a Plugin object which is the main piece of code we are looking for. This plugin is an embed object installed on the page with the function Plugin.createCIObject that inserts the following code on the page :

This plugin then exposes an attribute called ciobj which is the one reading information from the registry.

In fact this plugin preloads all the information from the registry found in HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\ in advance, and the guids that are presented in the pack object have no effect on these information, that’s why we can’t inject or make the plugin read other keys outside this path.

You can read the guid of the applications loaded by the pluing using this code :

How the plugin discover the installed applications :

The plugin object uses a simple method to know if the application is installed or not, installed applications have a version number associated with their corresponding object, if the application is not installed, the version number have the value of null, Google checks if the version number is not null, and hence figures out if the application id already installed or not.

Note that every object in pack.plugin.ciobj.Applications have the two properties exposed for javascript which are Id and Version. The script is really complicated due to the shortening in the variable names, and this function is the one responsible for returning the installed apps function getInstalledList(b, c).

And that’s it, maybe when someone else wonders someday how Google Pack fetch the information of installed applications on the visitor’s computer, he won’t hopefully waste 3 or such days trying to figure out how that javascript file works.