<Martani/> Blog

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.

Say you want to insert a link for your tweet inside that same tweet, or want to link a facebook update inside the update itself. The issue with this is that: first you can’t know what will be the link to your new tweet/update, and second, once you post something on these sites you can’t change it (unlike Google Buzz for example).

I am used to celebrate my tweets which rank is of the form xxxx where 0<x<10 (I expect some technical knowledge for my reader :p), for example my 1111th and 6666th tweet, and usually the form of the tweet was :

wohoo, my xxxxth tweet [and a link to this same tweet here]

The idea was to use a link shortening service and do the following, we can use bit.ly

• Check if the url http://bit.ly/WHAT_EVER_YOU_WANT_HERE is not already taken, by typing it into the browser and checking that a Page Not Found error occurred which means the suffix WHAT_EVER_YOU_WANT_HERE is available.
• post your tweet/update with the above link.
• then take the link of the new tweet/update, shorten it with bit.ly and custom the shortened url using the same suffix of the link above.

And by doing this, you finally have a circular link, targeting the same tweet/update which contains the same link targeting the same… you get the point.

Here is an example of a tweet:

A test tweet with a circular linkhttp://bit.ly/WHAT_EVER_YOU_WANT_HERE

After few changes in the “Bloginy Algeria” and “Bloginy Marroc” API, the Bloginto Google Chrome extension was broken and doesn’t show the feeds anymore.
Today I released a new version with some changes, mainly technical changes due to the API change, also added a timeout option for those who have slow internet connections.
The extension is to be broken anytime since Bloginy Marroc is not using the same standard for the feeds as Bloginy Algeria which is pretty stable.
The source code is also updated and available here on Google Code (you are welcome to change it to ameliorate the extension) https://code.google.com/p/bloginto-chrome/source/browse/#svn/trunk.
Finally, to update the extension (it should be automatic) you go to extensions then choose update extensions, if you don’t already have it installed, you can install it from here : https://chrome.google.com/extensions/detail/jppmcmbnmodlmgbfdddmeopgagancoak.

If you are used to the Unix programming with C, then almost the same concepts apply to OCaml using the Unix module, with slightly different syntax for function calls and arguments.

It is pretty straight forward if you have already done some system programming in C before, to compile you should add unix.cma to the arguments of ocamlc.

Example 1: fork, getpid and getppid :

This example shows how to do a simple fork to create a new process, then each process prints its pId to the console, here we cannot ensure which one will print first, the parent or the child. Here we use the usual function fork, getpid to get the ID of the current process and getppid to get the parent process.

Compile :

Output 1:

Output 2:

Example 2, wait:

To ensure that the child process finish before its parent we use the wait system call, which returns the id of the finished process and the status code returned from the process.

Output :

As you see, the child exits with the code 13, the parent calls wait to wait for its unique child created with fork, then reads the returned code, note that OCaml will generate a warning here because we just check for WEXITED (we know it will exit normally) but we omit WSIGNALED and WSTOPPED. In C you don’t have this flexibility of warnings which can brings you a lot of trouble.

Exemple 3, exec*:

This example demonstrates how to use the exec* calls, these methods replaces the core of the process with the new code of the command to be executed thus the function never returns, when the function fails, an exception is thrown, check the specifications here.

Here we fork and replace the child code with the ls command’s, here is the output