What is reflow, repaint, restyle and relayout?

Posted by – June 9, 2013

Web browsers are more or less scriptable rendering engines. These engines usually render text and images but sometimes  videos or similar medias too. The rendering process starts when browser receives HTML or markup. Let us look at them step wise

  1. Browser received HTML.
  2. Parses HTML.
  3. Constructs a DOM tree, root of this tree is html tag. with branches like body and sub branches like div or p or a.
  4. By this time browser has also received CSS(hopefully :-) and parses it. Stylesheets have “cascading” effect. All this start as
    1. Browser default styles.
    2. External styles contained in style sheets.
    3. Imported styles in @import style sheets.
    4. Inline styles in <style> tag.
    5. Finally the style defined in style attribute of an element.
  5. Now browser has CSS and markup and constructs a render tree. Render tree has everything that must be rendered on to the page. Now, until and unless there are hidden elements, render tree will have almost all the visible elements. Tags like <head>, <script> and similar other tags are not included. Every other visible element will be in render tree.
  6. Now as browser has a render tree result of the above “flow“, it will “paint” this tree.
  7. But things do not stop here, browser calculates everything again to match up the viewport and a “reflow” occurs. This can be seen demonstrated. Delay the CSS arrival by some time and you can see a page loading without style and then when CSS arrives everything is “repaint-ed“.
  8. All the above are very expensive operations. But any change in page can trigger these. Resizing window, animations, adding or removing elements in the page trigger reflows and repaints.

For better performance avoid reflowing and repainting the page. But that’s not possible in case of dynamic app world of today. But there are some ways to make these repaints and reflows fast. Don’t do Y.one(elem).setStyle(styleattribute, value)/$(elem).css(styleattribute, value). Instead simply change the class. Don’t do following in sequence

  1. Change the font color
  2. Change the font size
  3. Change the font width

Instead create a class with all of the above and replace it. Every step will ask browser to do reflow and repaint. Better, perform the steps in a “batch” in background using JS and then replace the block with new node you created using JS. Reflow and repaints affect the performance of a page in same way slow network or a bad JS code will do.

How to create custom keyboard shortcuts in Gnome3?

Posted by – May 26, 2013

I upgraded my Debian Squeeze installation to Debian Wheezy. I did a fresh install and had almost everything up and running within hour. But Gnome3 is a pain to a new user. I had to spend hours to understand it and then I realised I can use Gnome Fallback Mode to minimise the “cultural shock”. But the keyboard shortcuts I was used to were not present in this mode. Luckily this was easy to fix.

To fix keyboard shortcuts, go to Applications (Press Alt +F1) > System Tools > Preferences > System Settings and choose Keyboard and go to Shortcuts tab. You can locate all the keyboard shortcuts here. I needed 3 basic shortcuts.

  • Launch Terminal: This is not present in the given shortcuts. I can press “Alt + F2″ which launches run command pop up and enter “gnome-terminal” command to run Gnome Terminal. But that’s too much of work compared to a shortcut. I needed to create a custom shortcut.
    • In Shortcuts tab click Custom Shortcuts.
    • Press the + button.
    • Enter a user friendly name, say “Terminal”, for name and enter “gnome-terminal” as Command.
    • Click Apply. This will add a row to the custom shortcuts list.
    • This newly created entry will show “Disabled”. Click “Disabled” and it will change to “New Accelerometer”
    • Press the key combination you want as shortcut, in my case its “Alt + Ctl + t”
    • If you by any chance press a key combination that is already in use, you will be warned.
    • Done!
  • Go To Home Dir: I didn’t bother to locate this shortcut and followed the steps mentioned above to create my own combination of “super or Windows key + e”, which is same as a MS Windows shortcut for launching file manager, to launch “nautilus”. You can pass arguments to this command to go to some different folder.
  • Minimise all windows or Show Desktop: Go to “Navigation” and in shortcuts list locate “Hide all normal windows”. This will be most likely disabled. Set up the new keyboard shortcut for it.

Now I need to set up virtual hosts and MySQL. :-)

MakeMyTrip.com – An example of how to mess up customer expectations

Posted by – April 11, 2013

PayBack points. The sole reason I use MakeMyTrip.com is PayBack points. Otherwise I will never ever login to MakeMyTrip.com. They had worst UED. And then they revamped the site and messed up user data. At least my data is messed up. To start with, MakeMyTrip.com has a tie up with PayBack. This tie up allows a user to redeem their reward points right away from MakeMyTrip.com website. So while you are finalising your tickets you can enter your PayBack details in a pop up on MakeMyTrip.com website and it will fetch your points which on your further authorisation will provide you a coupon code for redemption. This integration was messed up. If some how the interface between MakeMyTrip.com and PayBack failed the user would see cryptic “error: Bad Request” message in popup. If I were to design such a system, I would set up an alert on very first instance of such incident and will log it and alert the website team and show user a friendly message. I spent 30 minutes trying to redeem my point thinking I might have entered the PayBack card info, 16 digits card number, wrongly. But no. Then I fired firebug and I could see PayBack sending an Apache Tomcat error page as response which MakeMyTrip.com website didn’t understand.

I tweeted this to make my trip.


But that was not all. A typical New Delhi to Bangalore flight will take 2 hours and 10 minutes. But MakeMyTrip was showing my flight duration as 55 minutes! Who wouldn’t like to save time?
Super Sonic Flights!
Super Sonic Flights!
Super Sonic Flights!
Super Sonic Flights!

At work, we deal with large data sets. Most of the data is input by users and we come across such discrepancies. But our data processing models are trained in such a way that they figure out these discrepancies and alert stakeholders, suppresses the bad data from going to production. On top of it, error and exception handling is part of the code. And if it some how is not implemented the QA team hammers the product and finds out these kind of bugs. Then on top of it we organise a bug bash where other teams try to break our product in any possible way. I thought MakeMyTrip.com had enough resources to at least tackle the PayBack issue. There should be a mechanism to at least handle these exceptions if not anything else. But no. Their QA team is always on vacation. Check this.

Sample text!!!

Then they revamped the site. And my daughter is listed as “Mr.” and my date of birth is 6th Sept 1980. What??? I looked at my booking history. Turns out I booked my last flight on 6th Sept. Oh well that explains the day and month part but why my daughter is listed as a “Mr.” and my year of birth is 1980??? This is definitely a result of porting data. Now I have given up hopes. I am not sure if I can trust them with my credit card information that I provide every time I book an air ticket with MakeMyTrip.com

cannot open /var/run/vpnc/resolv.conf-backup: No such file

Posted by – November 20, 2012

Facing “cannot open /var/run/vpnc/resolv.conf-backup: No such file” error?
Run sudo touch /var/run/vpnc/resolv.conf-backup and retry.

How to remove blank lines from text files or php files or js files or…

Posted by – June 22, 2012

By running this command…

egrep --include=*.php -lRZ "^$"  ./ | xargs -0 -l   sed -i -e '/^$/d'

Just two parts to it, search for all *.php files and use sed to replace new lines with nothing.

That’s all.