Nibbleblog Techie theme edit

31 August, 2014

I recently happened to change my blog's theme and something didn't feel quite right.

The sidebar which pops out when you click the burger-like undefined button will not disappear if you clicked outside of it. That looked odd, considering that the default sidebar size is quite large and covers a lot of the screen.

Thanks to Diego Najar Nibbleblog is Open-source, and anyone can contribute for its betterment. So I did.

The most challenging part to accomplish this was to prevent event bubbling from a DOM element to its parent. Event bubbling means that if a mouse event, like click, hover and others is registered to a DOM element, it will bubble out of that element, and execute the event handlers for that event on the parent elements or the window element if they have one registered.

This event bubbling caused things to break. Upon clicking over the burger-like* button, the click would try to make the sidebar pop out, and the click event will bubble out and cause the sidebar to pop back in because I tried to keep an event handler on the window element (the parent of all.) This happened so fast that the transition animations had no time to complete and it seemed like nothing worked.

For understanding event bubbling, consider this HTML code:

<div id="div-parent">
	<div id="div-child">

If it so happens that both div-parent and div-child have a mouse click event registered to them,

var divParent = document.getElementById('div-parent'),
    divChild = document.getElementById('div-child');

divParent.addEventListener('click', function() {
	// do something
}, false);

divChild.addEventListener('click', function() {
	// do something else
}, false);

then upon clicking the div-child, something else and something, both will be done.

This may seem like a very bad behaviour, but is a very good fallback in case things break.

Fortunately, the folks at W3C have it considered and provided us with a preventive measure. If the above code is modified to:

divChild.addEventListener('click', function(e) {
	// do something else
	// e is the event
}, false);

the event no longer bubbles out of div-child and we are good to proceed.

So I applied the fix and pushed it. Within 2 hours, it got merged! That is fast.

Sidebar now disappears when clicked outside · 3bf4189 · dignajar/nibbleblog


* - I was hungry, alright?

The first comic I ever drew

31 August, 2014

Well, I am not a comic artist, and far from being any good at drawing, but there arose some strange circumstances where I needed to draw one.

Here it is:


Drawn on a Chocolate wrap, it went worse than I expected. Still better than all my previous endeavours.

As you might have guessed by now, it did not serve the purpose it was meant for. [Sighs]

Mozilla, I owe you an apology

29 August, 2014

All kinds of people in this world can be broadly classified into two categories.

And I unconditionally choose to be the second kind. Always. This time, the categories were not-assholes and the others.


Not everyone gets a chance to be selected for Google Summer of Code, and if you do get selected, you work hard to pass it. Well, I turned out to flunk it. It is not a very bad thing altogether as I now have an impetus to curb my procrastinating habits.


Enough of random talk already. Lets come to the point.

I have pushed sufficient code that just works and provides pretty decent suggestions. This is the commit: gargsms/gaia - GitHub

For those who are not going to read, here is a small list of tasks the scripts do:

  • We add a word not present in the static dictionary file, and update their frequency if the user types them over and over making them get precedence in suggestions,
  • We spawn a new thread that checks for words with the nearby keys of the individual letters typed, and return them with their weights if found,
    • For example, consider the input is 'hj', we look into our new database for 'hj', 'gj', 'jj', 'tj', 'hh', 'hk', 'hu' as the nearby keys to 'h' and 'j' are 'g', 'j', 't' and 'h', 'k', 'u' respectively
    • We have limited our number of nearby keys to consider at 3 for better response
  • We seek suggestions from both the dictionaries individually and combine them based on their weights,
  • Bingo!

Here I attach a few screen-shots of the working code:

'Mithai' is a Hindi word meaning sweets. It did not yield any suggestions before it was added into the database:


Once it is in the database, as soon as we type 'm', this happens:


Yay! Sweets.


Few things still remain:

  1. allow numbers to be typed inline. Currently suggestions disappear if you type a number,
  2. add a Settings entry to enable or disable this feature,
  3. add support for keyboard layouts other than QWERTY which we support at the moment,
  4. option to export or import the saved dictionary.

Phew! Saved to disk.

21 June, 2014

Last time I blogged about the project (which was quite a long back ago), I was able to build only an in-memory dictionary. This dictionary will get wiped out as soon as the device was turned off, or the keyboard process was shut down. The timeout was a full 30s but it is way too small in real usage examples.

This is where indexedDB comes to the rescue. The HTML5 specification, along with many other great additions, now allows support for a script to write to disk with the help of indexedDB API. It was possible to have some data cached earlier too using localStorage, but that was a mess. It was a synchronous read/write operation, blocked the UI, and gave a limited amount of (usable) space. With indexedDB, the storage space has no bounds, at least not with Gecko, and since the API calls are asynchronous, the whole thing just works flawlessly. Gecko uses a SQLite engine to store indexedDB data.

0. The changes committed:

The full commit is here: gargsms/gaia - GitHub. A new commit is on the way with some minor changes.

Major changes from last commit:

    - modified the word insertion criteria -  now adding a word at suggestion dismiss, auto-correct revert, or a punctuation at the end of a word if there are no suggestions,

    - prevent insertion of random stuff - things like #!@$ don't get added to the dictionary now, numbers do (will need to think about that).

1. Roadmap ahead:

    - Import of Contacts - using contacts API,

    - generation of a dynamic TST to feed to prediction algorithm


For the time being, I am trying to decipher the current binary dictionaries. If the generation of these dictionaries becomes clear, we can derive new methods to update them on the fly, thereby removing the need to consider a new data structure totally. Till then, a new tree needs to be generated for the indexedDB.


-- An addon came very helpful for the purpose of viewing the SQLite database. There are limited number of tools available to operate on SQLite databases, but this addons kicks everything out of the water. A must try thing.

SQLite Manager

Firefox OS project overview

10 June, 2014

What is the project?

The project aims at adding a user dictionary to the Firefox OS keyboard prediction. The predictions are static as of now, and this project tries to enable learning capabilities in the dictionary thereby making the predictions dynamic.

The approach:

As of now the predictions are made from binary dictionaries. Many of the dictionaries are taken from the Android Open Source Project (AOSP) while others are contributions from the community (mozilla-b2g/gaia - GitHub)

As far as I have made progress, my code now makes an in-memory dictionary of words based on the following criteria:

1. User dismissing the suggestions altogether by tapping the (X) button alongside;

2. User disabling the just made auto-correction by tapping backspace.


In the above picture, if the user taps the (X) button, or taps space (which causes the highlighted word 'chug' to be inserted) and reverts back to the original word by tapping backspace, the word 'dhygf' will be added to an in-memory dictionary.

The code also avoids redundancy in the addition of new words in to the dictionary.

I have also added a simple prediction ability from the user added list of words.


The problem with the above test is that the dictionary is currently volatile clearing itself after the phone is rebooted or the keyboard app is killed.

The milestones for the next day are:

1. adding support for listing of Contact Names in the dictionary;

2. enabling save of the dictionary to the disk for later use.

Later I will try to optimize the dictionary search (which currently is quite naive), and making a proper data structure for the dictionary that we are saving.


No more procrastination

08 June, 2014

I have been acting bananas for the past 3 weeks doing close to nothing regarding my GSoC project, but no more, a new blog post everyday guaranteed from now*. :)

Quite frankly, it wasn't completely my fault that I have done so little till now. Last few weeks have been the toughest times for me. Nonetheless, I am all set now.

Let me give you an overview of what has happened with me earlier.


Post GSoC selection:

PRACTICALS, VIVAS, EXAMS. I have been to hell with Civil Engineering. As if this was a good omen, my old machine (from now on, I will refer to a machine as dabba) died. I tried operating everything upon it, but, it had plans to torture me. I even resorted to begging in front of it, all in vain. :'(

Few rays of hope came by when one fine day the gods were very happy with me, and the dabba displayed the BIOS screen. It worked for a few days, enough to make me think that my life was back on track, but how foolish was I.

Then came the time to go home, for a few days. It is necessary for us to shift hostels for the summer vacations (something which is as pointless as a whole number.) Having transported the dabba to the new location, I tried to boot it up, and realized that it has passed away, again. It is dead even now, lying quietly in one corner of the room. Much to surprise, the new place had no internet access. This for sometime reduced me crying for the revival of the dabba. 2 more days and I left for home.


Week 1 (May 19- May 24):

I was at home, enjoying an ultra fast 2G internet on my horrendously amazing DUMB-phone. Almost no conversation with anyone ever took place.

I originally had plans to come back by May 23, and being utterly optimistic never booked a return ticket. All hail the mighty IRCTC, couldn't get the proper ticket booked in tatkal scheme. Tried the same thing for the next day, without success of course. One does not simply book a tatkal ticket at IRCTC.

Somehow, got one booked with the help of a friend, with just a little nightmare-like problem. I was in the Waiting list. Dafuq. I was quite sure I am not getting that thing confirmed in any earthly scenario, so I decided of making some cash. I had a bet with the friend who booked my ticket that if the ticket gets confirmed, he gets a waiver worth half the money he owes me. Lucky ass, it got confirmed. I had mixed emotions upon losing my money and getting this blessed.


Week 2 (May 26- May 31):

Finally I was back to the college. Oh, the joy of having great internet speeds again.

I ordered a new dabba the very day I arrived. Delivery was to be made by May 31. Thanks to Flipkarts fine service, I got the dabba on May 29.

Wonders of nature are always unpredictable. The very moment I had the dabba with me, the holy internet service stopped working throughout the campus. Upon further enquiry, it was found that the fiber cable got broken somewhere in the wilderness. I wonder who chew it. I had a new dabba and no internet. Seriously, what a great combination.

Somehow, there was internet access in the labs where I went on to get things working and finally set things up.


Week 3 (June 2- now):

Finally, I had the internet facility restored by June 2. Within this time, I have decided upon the starting details of the project.

Code examples and other details are topic of the next post.


* some conditions applied

← Older posts