Sunday, December 29, 2013

Have kids? Read this :)

20 Excellent Websites That Make Your Children SmarterIf you have kids, then this post is for you!

Llifehack has a wonderful collection of 20 Excellent Websites That Make Your Children Smarter!

The post has a collection of links which will help you raise smarter kids. Internet is a strong medium, provided you know where to draw the line. Posts like this are what make it usefull.

Technorati Tags: ,,,,

Monday, December 9, 2013

Modernizr - Detecting HTML5 and CSS3 features in client browser easily!

modernizr

The web-browser is a primal connection between any online service and a prospective user or client. With changing standards and old browser versions as common as they come, the need to evaluate ‘browser vs. new feature’ compatibility is now more important than ever.

Here-in I will give an introduction to the excellent Modernizr API. I am breaking this in easy to read parts, so stay tuned!


Introduction - HTML 5 & CSS 3 features

We know the importance of standards in the World Wide Web, one of which is the HTML markup standard. The HTML standard prevails as the ubiquitous structuring and presentation language for the World Wide Web.

HTML5 or the fifth iteration of HTML enables the provision of ‘beyond mark-up’ features, which until recently were available only by use of third party plugins. A good example of this is animation and video for web pages.

Web animation has long been a forte of Adobe’s Flash, which provides a rich end user experience. But the fact is that it is capable of burdening the bandwidth and occasionally causes memory issues for most modern browsers (this is especially prevalent in tabbed browser sessions having several flash widgets).

On the other hand, HTML5 now offers better inbuilt multimedia tag support, integration with geo-localization, drag-and-drop API support and so on. It allows in-built support and usage for video and audio. This enables handling web based multimedia as well as graphical content, without depending on traditional plugins and external APIs (albeit with some help from JavaScript and/or CSS3).

As far as the video is concerned, the HTML5’s canvas element makes it very easy to integrate and manipulate video related elements.

CSS3 on the other hand, is about evolution in design. It offers better in-built support for text decoration and rendering and tries not to rely on JavaScript as before for implementing the same.

Rounded corners, fancy menu support, rich background integration etc. all these ultimately work towards enhancing the overall end user experience.

An important factor which spearheaded or necessitated the integration of external features in the current HTML and CSS standards are the multiple and evolving information access techniques, namely mobile devices.

With diversified ecosystems and non-uniformity in standards, it is nothing short of a ‘developer’s hell’ to develop a ‘code-once run-anywhere’ solution.

For example, it is common knowledge that Adobe’s flash has support issues and known incompatibility on some Apple as well as Android devices.

Hence, we needed standards like HTML5 with CSS3 for designing cross-platform solutions.

 

Why do we need feature compatibility checks?

One aim is common across all of the modern day Web-browsers – to render the Web pages optimally and according to the latest specifications. But sadly, this attitude wasn’t there in the past.

Browser providers have had the habit of implementing exquisite, unique and popularly demanded features in their own unique manner, which eventually led to a broken standard ecosystem.

Although this seemed to suffice as far as the end-user is concerned, the developers got the short end of the stick! Actual development became difficult since these custom feature implementations had to be taken care of at the coding level.

In the current scenario, the latest versions of nearly all browsers agree to the scope and viability offered by the feature-rich HTML5 standard. But HTML5 itself is still evolving.

The major HTML5 APIs (2D drawing, offline web applications, video and audio, DOM Levels, CSS3 and so on) are still not out of their core development cycle and are continuously changing.

If we talk of individual browsers, Firefox, Chrome and Opera are early standard adopters, which is a two edged sword in itself, since issues pertaining to security etc. could still be waiting to be discovered.

Talking of Microsoft’s Internet Explorer, it is nearly always at the end of the adopter line and is slow to support the common HTML5 features prevalent today.

On one hand while we as developers wonder how our application will run on “pre-HTML5” browsers, on the other we are never quite sure of what hardware and software combination our product or service would eventually be accessed on (a fact given shape due to many nonstandard mobile platforms)!

But the thing is that there is no fully HTML5 compatible browser.

HTML5 in itself is not a product or end feature; rather, it is a collection of individual feature evolutions.

Hence, our aim is to detect support for newer features (like canvas, video, or geolocation), and thus here-in comes the need of feature compatibility checks.

 

What checks exactly are required for ensuring compatibility or available features?

Each and every web-page in a browser is rendered according to its DOM (Document Object Model). In short, the DOM presents all the available HTML elements on that page to the browser.

So basically, if we need to check for compatible features, we need to check the DOM elements themselves.

The actual checks should include the following basic parameters or criteria –

1. Checking for a core property at a global level (e.g. a browser’s geolocation capability)

2. Checking for a property at an element level (e.g. a video element)

3. Check if an accessible method or function is available for the element & check the method calls for both getters and setters (e.g. if a video element is available, check for a specific video format support, or set the format for the current video element)

4. Check if the properties set by the above setters are retained.


In the up-coming parts, we will visit the compatibility check options, their implementation and how modernizer steps in as the leader of the pack. So stick around!

Thursday, November 7, 2013

Is your USB drive genuine OR How to test your USB thumb drive / memory card to ensure it is not a Banana!

 

7-Nov-2013 – NOTE: – I am bumping this old post and would be updating some parts of it with newer utilities out there (will be monitoring new stuff and adding as I find it) So keep checking Smile

1. PC Advisor has an article on the same here.
2. Our dear ‘friend of the nerds’ Nir Sofer has an up-to-date page for ‘USB Flash Drive Speed Tests - Any Drive Size’. Provides good comparison with accurate data!

Now follows the original article as below --

image

NOTE: I recently did an article (hosted on Experts Exchange) WRT the said topic.
I wanted to add some stuff bit to the original to make it a bit easier to follow, thus am presenting the result below.


If you are planning on buying a USB drive from eBay or any other popular online e-commerce site, chances are that in spite of those high seller ratings, you may still end up getting a counterfeit!

Popular USB drive makers like Kingston, Transcend and the like are much more likely to be duplicated.

And when the sole usage of your latest thumb drive is going to be that crucial back-up routine, it becomes vastly important that the drive itself is trust-worthy and pristine, lest it ends up as a double whammy!

It becomes even more difficult when the forged units sport nearly 100% original looking packaging. And bar-codes and serial numbers are something too complex for an end user to verify until the same are verifiable online @ the drive maker’s website.

But wait, what exactly are counterfeit drives?

Counterfeiting in USB drives involves hacking of a USB drive’s firmware (basically a low-level editing of the firmware) so that the drive’s specifications report a higher than actual capacity (of the physical NAND chip on board)

As a result, when you try to write data to the drive over and above its actual capacity, your data gets stored as corrupted.

So, how can you actually go about validating your purchase as an actual genuine item?

1. Be aware of fake sellers!

An obvious first step would be to avoid buying from already proven fake websites and sellers. A nice catalog of this information is available online at the FlashDriveFacts site (URL: http://flashdrivefacts.wordpress.com/)

A problem here is that this site itself hasn’t been updated since February 2012. Nevertheless, it provides a good starting point. If you are betting on an eBay seller, you can check the seller’s rating and customer feedback too. Obviously never go in for buying from a seller already proven as dubious!

2. Be aware of original markings and counterfeit indications!

Another obvious second point would be to “research a bit before going in for an online purchase”. As simple as this may sound, many people fall in the irresistible deal trap.

When you are still contemplating the actual buy and are yet to place the online order (or visit a physical store), remember to Google and search for the exact model and its original price online.

If your seller’s deal is too good to be true and the price difference seems substantial, it would pay to be cautious, and be absolutely sure about the product being genuine!

Also, search for images of that model online and try to know before-hand how an original drive would look like. If yours is any different (as shown in online previews) feel free to question the seller.

You could also lookout for certain markings / engraved information on the USB drive’s body (see below image for reference).

image
The above is a sample engraving for a Kingston pen drive.

Although this would not hold true for all the drive manufacturers out there, but makers like Kingston have made it a practice to engrave model related information on the steel USB plug. This marking is also verifiable for HP thumb-drives out there.

Moreover, Kingston also offers following URLs for online verification of its many products –

· For all memory products (including memory module/RAM modules) refer the URL –

http://legacy.kingston.com/asia/verify/default.asp

· For USB Flash Memory Products refer the URL – http://legacy.kingston.com/asia/verifyflash/

· For visual product verification please refer – http://www.kingston.com/us/support/product_verification

3. Use software tools when you cannot decide or the forging is not that obvious!

Certain tools for testing out USB blanks are slowly becoming a sure shot, one step verification standard.

These can actually be used both for detecting the bogus USB as well as to check the actual / real world performance (i.e. capacity / operating speed and so on) and other advertised specifications.

The most popular and commonly used application of the lot is the H2testw which is the much proclaimed “Gold Standard in Detecting USB Counterfeit Drives”. The last documented version is the H2testw 1.4.

NOTE: this application is capable of testing USB thumb-drives as well as SD cards (Mobile/camera based MMC cards) memory cards!

The link discusses the counterfeit issue as well as the usage of this excellent piece of software. Although the application is hosted by a German site, the direct (German to English translated) link is http://translate.google.ca/translate?hl=en&sl=de&u=http://www.heise.de/software/download/h2testw/50539&sa=X&oi=translate&resnum=2&ct=result&prev=/search%3Fq%3DH2testw%26hl%3Den%26sa%3DG

The actual direct download URLs for the application are –

HTTP - http://www.heise.de/ct/Redaktion/bo/downloads/h2testw_1.4.zip

FTP - ftp://ftp.heise.de/pub/ct/ctsi/h2testw_1.4.zip.

H2testw 1.4 Usage

1. Launching the application’s executable leads to the following UI –

image 

2. Choose you language as English (or Deutsh if you are German!)

3. For best results, ensure that the drive to be tested is already backed up and formatted, as the test performed is data destructive. So copy off any data and format the drive already!

4. Select the target USB – browse and select, here H: is selected –

image

5. Select the option to “Write + verify”. The test will start and a similar window is displayed –

image

6. Wait for the test to complete and the results to display. On a large capacity drive, this would take some time. So sit back and let the application do its job J

7. After the completion, a similar looking test result is shown –

a. Sample Output for an authentic 2 GB Drive (what I tested on my machine)

image

The above is a pass message for a valid/authentic drive.

b. Sample Output for a Fake 64 GB Drive (from the sofakeflash site’s H2testw page (http://sosfakeflash.wordpress.com/2008/09/02/h2testw-14-gold-standard-in-detecting-usb-counterfeit-drives/).

image

Making sense of the test results –

Evaluating the above FAKE USB result, it is clear that a 4GB flash drive is masquerading as a 64 GB flash drive. Imagine the seller’s and the fake USB creator’s audacity!

Moreover, since a genuine 4GB drive should be about 3.9 GB after formatting (and not 3.8 GB), the difference indicates that some sectors are obviously not usable and have been marked as bad. This further indicates a low quality NAND chip.

So once you start using the drive beyond 3.8 GB capacity, the data will surely be un-recoverable

Oh no! I actually have a fake drive? Now what?

If your test results indicate a fake USB at your hands, you can approach the seller on eBay (or your e-commerce site) and tell him the situation. Thanks to H2testw 1.4, you have the required proof too to back-up your claims.

Most sellers would be quite forthcoming in helping you get a replacement or a refund. But In case of issues, you can always post comments on the e-commerce site with a copy of this report.

Following which, any self-respecting seller should be willing to help you, as the reputations are what eventually would get them their business.

Conclusion –

The above is a short illustration about the ongoing counterfeit racket and the capabilities and usage of H2testw 1.4, which is quite easy in its usage and informative as well with its detailed report.

It can even test 64 GB media and finally report its detailed results in case of failure (as shown above).

For reference, you can check out the excellent article at Raymond’s site How to check and Test USB Flash Drive (Link - http://www.raymond.cc/blog/how-to-check-and-test-usb-flash-drive/).

Hope the above article helps you to keep counterfeit USBs at bay!

Tuesday, September 24, 2013

It’s Android’s 5th Birthday, and you should be celebrating!

http://www.techjailbreak.com/wp-content/uploads/2012/10/Android-4th-Birthday.jpg

Hey Droid-o-holics, Android is 5 years old today… and with the hugely successful release of Android 4.3 a.k.a. Jelly Bean, Google, it seems, is trying hard to make all the right moves and getting there too!

Andy Rubin would be so proud!

Verge has covered the journey of Android right here… and quite nicely too.

And to top it all, the Jelly Bean's successor (Android 4.4) a.k.a. KitKat, is supposedly around the corner.

So where’s the party?

Thursday, September 12, 2013

Thursday, August 15, 2013

Home Improvement: Fix that ‘slowly getting slower’ ceiling fan!

All work and no play makes jack a dull boy… but all work and no household chores will make any respectable husband getting labeled as useless!

Fellow husbands, read on…

So, this is something which is not about gadgets or coding, but about… life-hacking!

This hack has been ‘discovered’ and not invented, but nevertheless should be quite useful for my fellow brethren.

If your room’s ceiling fan has been getting slow with passing days, wait before calling that electrician. Maybe its just time to …. clean your fan!

Yes, just clean the blades of the friggin’ fan!

The accumulating dust on the fan-blades creates friction and also the precise angle required for air generation is countered.

So this can be tried before you call your electrician. No harm in trying it, and its free!

Also, to clean the blades of the fan, just use an old discarded pillow cover (get this from your wife, please do not guess!)

Just cover the blade with the cover, and rub the blade from the end to the tip, collecting the dust in the cover, easy! The cover collects the dust and prevent it from falling over, on your bed.

Simple genius, isn’t it?

The best part is, you *should* get some extra brownie points from your significant other, which as any husband knows, is a rare and significant event (in other words, totally worth it!)

So by all means, go and try this out, Tim Allen would be so proud!

Thursday, August 1, 2013

Log4j 2 = Insane performance!

image

I just read a great discussion on how Log4j 2 is awesome!

Being a developer, this is great news! And it is coming up to be a worthy successor of Log4j and seems to provides significant improvements too!

The improvements include -

  1. API Separation
  2. Improved Performance
  3. Support for multiple APIs
  4. Automatic Reloading of Configurations
  5. Advanced Filtering
  6. Plugin Architecture
  7. Property Support

Many of these follow the positives of LogBack (which has been touted as a successor to Log4j).

Get a load on the introduction and the API to Log4j2 here. And also the discussion on its performance in this nice article Log4j 2: Performance close to insane (courtesy the Java Code Geeks)!

Have fun!

Technorati Tags: ,,,

Wednesday, July 31, 2013

Android, thy fragmented love! Your data says it all…

image

Anyone following the mobile trends knows the growth curve Android has taken in the last few years. This popularity has had its own share of fragmentation issues and multi device hell. The Verge has done an interesting piece on the same,

image

The original take is available at the OpenSignal site.

To quote OpenSignal -

We have seen 11,868 distinct devices download our app in the past few months. In our report last year we saw 3,997.

Wow!

And to think of it, just today I had this discussion going on with one of my friend about the state of Google jumping the Hardware bandwagon via Motorola.

and now this… So much for the originating developer hell out of all this chaos!

Tuesday, July 16, 2013

JavaScript debugging with Firebug’s console logging

As most of us know, Firebug is a great developer assistance tool. In the following short, I discuss how to extend its capabilities even further by using the Firebug console to your JS development advantage.

 

Firebug - an introduction

Firebug is a Mozilla Firefox add-on and is one of the most powerful and well-known web development tools available for Firefox. It excels at assisting development and backs up any web-app’s development cycle with a plethora of useful sub-tools and features.

Being developer friendly, it provides live HTML modification WRT layout, styles and also control over the page's XHTML, JavaScript, CSS, AJAX requests.

Code inspection and the availability of an excellent JavaScript debugger helps analyze both the network usage as well as chart out performance statistics.

Firebug can be further enhanced using extensions, and provides specific and granular functionalities so as to provide information required.

Although Firebug is a great and opulent contribution, and brims with several features worthy of discussion, we dedicate this write-up to one of its more humble offerings: the console.

Before we start, we assume that the reader has the following installed:

1. Firefox browser

2. Firebug

We also expect you to have knowledge of some basic Firebug usage and its abilities.

Sunday, July 7, 2013

Get the latest issue (July 2013) of Groovy-Mag free!

July 2013

Guys, get the latest GroovyMag issue for free…

  1. Go to http://www.groovymag.com and register;
  2. Use the coupon code ‘75l5331’;
  3. Add the latest groovy magazine to your account;
  4. Download your free issue of GroovyMag July 2013!!!

But remember, the coupon is good for 20 uses, on first come basis!

So hurry!

And as a bonus, you get to read my article - Asynchronous programming in Grails!

Tuesday, June 11, 2013

The charge card is here! A first hand review.

Alright. In case you don’t know the premise of this insanely useful piece of a gadget, it started as a kick-starter project, led by Noah Dentzel & Adam Miller.

It later debuted at this year's CES.

This wonderful project has given us this little piece of genius -

image
(*image courtesy the ChargeCard site)

This, my friends is the charge-card - a charging cable which fits in your wallet or purse!

A cable which takes ‘portability’ to the next level, ensuring that the means of charging your super smart device is always available.

The ChargeCard is designed in the shape of a credit card (although, three times the thickness of a credit card).  It is available for

As per the site -

“ChargeCard for Micro USB works on Android, Blackberry, Samsung, Nokia, Kindle, Jambox, Jawbone and all devices that charge with a Micro USB cable.”

Also,

“With this form factor, the ChargeCard fits naturally into your wallet, purse or pocket. It's there when you need it, and out of your way when you don't.”

Ingenious I say!

My views -

I got my version in the mail yesterday (yes, I had pledged over at the KS). I had ordered the black micro-USB version. Got is in a good-looking minimalistic package.

image
(My Micro-USB charge-card. Will post more pictures soon!)

The card is made mostly of rubber and I have successfully been able to charge and sync my smartphone, MP3 player, and so on. The thickness is a bit more like my office access card. So ‘3 times the credit card size’ is quite true.

Tech review sites like Wired, CNET, Engadget, Lifehacker, and Mashable have already reviewed this little genius and the reviews have been pretty good!

The USB plug is enclosed in a flexible rubber, allowing you to twist or bend it in order to plug it in any USB port.

If you own a smartphone or even a device which uses a micro-USB port and can be charged via the standard USB, you will appreciate this nifty gadget. This is what every self-proclaimed GEEK should have in his or her wallet/purse.

My friends, you are but incomplete without it!

Head over now to charge-card-project, and place your order ($25.00 USD* & Free Worldwide Shipping!). You **may** be able to find some discount codes online.

Monday, June 10, 2013

New JS playgrounds!

The article at Mashable introduces us to some new script based WIP currently at GitHub.

image

For now, have a look, I will try and research more on the interesting ones and maybe will cover something in the coming issues of JSMag,

Sunday, May 5, 2013

JSMag and GroovyMag – May 2013 Issues are here!

May 2013

From JSMag.com

What's new in jQuery 2.0 - Chetan Khurana

A major version release of the most popular JavaScript library is here! Learn more about what is new and what has changed.

Go to http://www.jsmag.com, and use the coupone code – 2me7csp

May 2013

From GroovyMag.com…
Grails Plugins "Inline" - Chetan Khurana

Customizing a grails plugin which is commonly referred to in more than one application can cause many issues. Declaring plugins as inline solves these issues!

Go to https://www.groovymag.com/, and use the coupon code – 21yoc8k.

Steps to follow for getting the issues -

1. Register at the URL – JSMag  / GroovyMag

2. Go to the CART option and use the coupon codes given above;

3. Go to your account option to download and access your free copy of MAY 2013 issues!

Feel free to blog, twitter, give to colleagues or otherwise disperse.

Friday, May 3, 2013

JavaScript & DOM Reflows

js45_400

This article is from the November 2012 issue of the JSMag publication.

In here, we discuss the concept of DOM reflows and why they are expensive (and should be avoided).

I am replicating the article in its entirety as below and not to mention with full input & collaboration-credit to my good friend Chandan Luthra!

Hope it is helpful to my friends out there!


If you use JavaScript for your web development, you need to know about DOM reflows. Here we discuss what reflows are and why they happen. We also go through ways to minimize reflow issues in order to improve java-script performance.

 

What is a reflow? – an overview

Let us start evaluating a simple HTML or XHTML webpage. This webpage is bound to include references to resources such as CSS, external java scripts (JS) and images etc. and all these collectively contribute to the final look and feel of the webpage UI.

These relative DOM elements are connected in a hierarchical/structural layout, and are encompassed in a logical pattern called a frame. This frame may be a child or a parent of subsequent inner frame element(s). Each of these rectangular frames has specific attributes like width / height and so on.

During the rendering process of the webpage, the entire DOM element model is traversed by the browser. This traversal starts from the absolute parent (i.e. the <html> element) then proceeds or flows through the entire DOM. A reflow refers to the revalidation of page elements for (re)rendering the entire DOM after any DOM updates.

 

Wait a minute! How is this different from a repaint?

Both DOM reflow and repaint events can happen on an HTML page and reveal any element’s altered state. A repaint occurs when changes are made purely at a superficial or visible level, like changing the color attributes of an element, and which do not affect element layout at all. Examples of this can include modifying table borders, div related visibility or page /element level background color.

A repaint too incurs some expense as the browser engine has to re-process the visibility criteria for the whole DOM tree.

 

When does a reflow happen?

A reflow is more or less quite a substantial change and is triggered whenever a user or script action makes changes to the DOM tree.

This may be due to changing a style (thereby changing layouts), changing any element’s className property or simply changing browser level properties, like the browser’s window size etc.

As soon as such a change is detected by the browser engine, the actual changed element and its subsequent child elements have to undergo a reflow so as to cascade their parent’s update.

This change is cascaded further down the line and all the dependent elements appearing after the updated DOM element have to be reflowed in order to adjust to the newly calculated layout.

Moreover, the parent or preceding elements will also need a reflow to acknowledge the layout changes of their child elements. And after this reflow is implemented all over, a final repaint request is issued for the DOM.

Reflows can be classified as instant (as in case of a response to user / script processing) or they may be required as a part of page load process, when page elements are loaded in a sequence (for example in stream based rendering).

 

So why are reflows actually bad?

Sometimes reflows are actually required. An example is using script based animation sequences which is handled via reflows. But an “un-intentional reflow” due to coding issues in scripts and poorly planned style classes is what leads to expensive and performance hampering behavior.

Reflows are bad since they are very expensive and counterintuitive to performance. They can and do lead to slow JavaScript and a poor user experience. The scenario gets even worse for devices with low processing power such as phones and tablets or any other device where processing power is at a premium. A reflow is more or less akin to refreshing or performing a fresh layout for the entire page, which is surely heavy and undesired.

 

Some common reflow events and how to minimize them

Let us go through some easily avoidable reflow instances which are mainly caused due to coding oversight.

 

Updating DOM elements in a loop

Assume a scenario where-in we need to modify an element in the DOM tree. For example, suppose we have a DIV parent having some child anchor tags and we need to change the className attribute for these anchor tags within this DIV element.

function updateDivAnchors(divElement, newAnchorClass){
var anchorObjs = divElement.getElementsByTagName('a');
var totalAnchorObjs = anchorObjs.length;
for (var i = 0; i < totalAnchorObjs; i ++) {
anchorObjs[i].className = newAnchorClass;
}
}

Listing 1: User defined method that replaces/adds a className to the div elements


At a glance, the function in Listing 1 will surely do what is intended, but we have a major reflow issue here. This code fires a DOM reflow for every update to each anchor element (as we have a loop in effect).

Now, if this DIV has 10 child anchor elements, the entire DOM tree would undergo an un-necessary refresh 10 times. This is a lot of undesired reflow activity!

Any better solution should avoid touching the DOM during the DIV update. One way this can be achieved is by using a modified script that would –


1) Remove the DIV (to be updated) from the DOM;

2) Update the anchor elements in that DIV;

3) Re-add the DIV back at its location in the DOM.


This approach can be further refined if we make use of the DocumentFragment object.

As per this definition at Mozilla Developer,


A DocumentFragment is a minimal document object that has no parent. It is used as a light-weight version of document to store well-formed or potentially non-well-formed fragments of XML.


Thus, a DocumentFragment can be created on the fly to create a temporary DIV node as shown in Listing 2.


1 var docFragment = document.createDocumentFragment();
Listing 2: Example to create DocumentFragment object on the fly

After this, we can iterate and populate this fragment, manipulate the anchor elements, and add back (rather replace) the actual DIV with this updated fragment. So basically, the number of reflows which was proportional to the number of anchor tags in the previous example is now limited to just two reflows! This is bound to speed up the action for that page.

 

Manipulating visibility attribute to update element properties


Another way to reduce reflows is to use hidden elements. In case an element or its children require many separate changes (which cannot be combined into a single repaint), the element’s visibility style can be set as display:none, the changes made, and then the element can be set back to its normal display.

Changing properties or attributes of hidden elements does not trigger the repaint request since it is not being displayed.

Similar to the earlier mentioned fix, in this case too we need only two reflows. One when the element is hidden, and second when it is made to appear again, but the overall effect can be much faster (issues like abrupt UI refresh for dependent elements can be avoided by using a preset offset value)

 


Changing an element’s style attributes – style vs. class update


If we need to make several style related updates for an element, the same should be done at one go to minimize the number of reflows.

We generally code to set element styles one at a time, as shown in Listing 3.


1 var targetElement = document.getElementById('anyDivId');
2 targetElement.style.background = '#333';
3 targetElement.style.color = '#fff';
4 targetElement.style.border = '1px solid #00f';
5
Listing 3: Code to change/update few cascade styles of an HTML element

Here, for every single style update a new reflow request is invoked which is again an overhead for the DOM. A better and faster approach would be to create a CSS class for the identified style changes and update the same as shown in Listing 4.


1 document.getElementById(' anyDivId ').className = 'newDivClass';
Listing 4: Example of applying CSS class from JavaScript

Note: There are many more ways which can be utilized for further minimizing the nuisance due to reflows. Please refer the links at the end of the article for the same.

 


Figures to back the impact of reflows


The point of the entire discussion is that it is actually JavaScript which triggers the reflows and repaints. Avoiding the reflows will make the page appear faster not because of a speedier script engine but because the browser is doing less of reflow and repaint activity.

The reflow minimization above may or may not lead to any tangible/actual performance benefits (like JavaScript speed up etc.). But the advantage will be that the browser will now show a faster response time against actual user actions. We will enable the browser in such a manner so that it spends lesser time requesting expensive I/O and processor resources for redundant DOM reflows.

If we use any pure JavaScript profiling tool, the reflow related code optimization will show little or no affect. We are not really bothered about speeding up the JS code; rather, we need to measure the effect it has on the browser rendering for that modified page.

As a reference, the link below shows the reflow in action (Wikipedia’s home page reflow video) –

http://video.google.com/videoplay?docid=-5863446593724321515&hl=en

If you want to track the paint events for your webpage, you need Firebug (https://addons.mozilla.org/en-us/firefox/addon/firebug/) and this excellent add-on https://addons.mozilla.org/en-US/firefox/addon/firebug-paint-events/.

This will show the DOM reflow/paint events in the Firebug console.

 


Conclusion & follow up


The above primer will surely be helpful for you in minimizing un-necessary reflow events. Below are some links for pursuing the reflow discussion further:

· A helpful note on HTML reflowhttp://www-archive.mozilla.org/newlayout/doc/reflow.html

· When does JavaScript trigger reflows and rendering?http://mir.aculo.us/2010/08/17/when-does-javascript-trigger-reflows-and-rendering/

· Page Rendering & Reflow Performancehttp://blog.monitor.us/2012/04/page-rendering-reflow-performance/

· CSS solutions for Browser Reflows & Repaints & how do they affect performancehttp://ajaxian.com/archives/browser-reflows-how-do-they-affect-performance




Tuesday, April 9, 2013

JSMAG April 2013!

April 2013

So here is the latest edition of JSMag! And you can use the coupon code zx4dr03 to get your copy for free!

Please feel free to blog, twitter, give to colleagues or otherwise disperse.

Find my article about “Modernizr - Detecting HTML5 and CSS3 Features” in this month;s issue!

Go here for the full issue - http://www.jsmag.com/main.issues.description/id=67/

Follow the steps in my earlier post - http://singularitycometh.blogspot.in/2013/02/get-both-jsmag-groovymag-for-feb-2013.html on how to get the issues. But please use the code in this post!

Thanks!

Monday, March 25, 2013

Agile programming – Now in family mode !

Excellent advice, and all in all a great TED talk.

You can refer this Life hacker article which talks about applying the "agile" philosophy to family life.

Also refer the direct YouTube link for the TED talk - Bruce Feiler: Agile programming -- for your family

Wednesday, March 13, 2013

Cloud based IDEs – Now code anywhere!

image

The backbone of any efficient Development Cycle is a versatile and intuitive IDE.

An IDE (or an Integrated Development Environment) provides comprehensive facilities for coding in a software development cycle.

Traditional IDEs are bound to the physical work environment and locally to the development system.

Enter the Cloud based IDEs

Cloud based IDEs are getting popular by the day. All they require is a web browser, where-in the editor can be used to write code which can also be stored in a cloud based repository.

The cloud is slowly getting the popularity and versatility it promised as a concept. It is already facilitating stuff like online backup creation, document sharing & collaboration (via cloud based CMSs) and data-sharing for distributed web channels like social networking.

The main beneficiary of a Cloud based IDE is the Mobile application development front. It truly integrated application development on a distributed level, and different aspects of a mobile application (like native vs. web) can be seamlessly developed, tested and integrated. 

For the cloud based IDEs, you are having many choices.

Some of them are -

and so on.

But it is the latest entry which excites me the most!

image

Yes, it is the Eclipse IDE which has recently launched the Orion IDE. Orion brings the experience and developer ease-of-use (and confidence) of Eclipse to the Cloud IDE arena.

Orion is still in progress, however, and it is limited to client based / front-end web development (i.e. HTML and JavaScript).

It features out-of-box Firebug integration and the usual Eclipse UI with code completions for starters!

One thing is for sure, the coming days are going to be interesting for the development arena.

Now all we need is an in-fallible, always on, (cheap!) broadband connection. Sigh!

Tuesday, February 26, 2013

The Firefox O.S. – Mozilla’s latest thunder!

The Firefox OS, codenamed Boot to Gecko (aka B2G) has been launched quite recently and is a topic of speculation in tech-circles. This O.S. is uses a Linux kernel and runs HTML5 based apps (which couple up with the Firefox browser)

Firefox O.S. aims at controlling the hardware (integration) using JavaScript (now how cool is that!), and its basic reason for coming to existence is ‘to create a true OSS (open source) O.S. for which apps would freely be available on the Firefox Marketplace’.

The first Firefox O.S. based smartphones should be shipping as early as the the first half of 2013.

From the GSMArena -

Mozilla is officially launching their Firefox OS for mobile phones and are proud to announce that they have deals with 18 carriers, a partnership with Qualcomm to use their Snapdragon chipsets and four manufacturers - ZTE, Alcatel, LG and Huawei. The first two also showcased phones with Firefox OS at the MWC.

Also, as per the latest reports, Sony is planning to launch its own Firefox O.S. based device in early 2014.

This could be a game changer for next year’s mobile technology (imagine the app development scenarios!)

Only thing which remains to be seen is how fast can market penetration actually help Mozilla, and oh, there is the current popularity of iOS and Android to add spice to the ‘market dominance race’ too!

Wednesday, February 13, 2013

Samsung Galaxy S4 Final Specs! Everything official about it.

Just the links here for the while -

Korean site - http://www.ddaily.co.kr/news/news_view.php?uid=101028

Translation URL – HERE

One confirmation is that Home button is there.

Will post when further details become available.

Sunday, February 10, 2013

Get both JSMag & GroovyMag for Feb 2013, free!

That and the latest issues of JSMag and GroovyMag!

Get the latest JSMag issue where yours truly has a “good enough to brag” article on HTML5 and a write-up in the and GroovyMag’s Plugin corner too (both with my good Friend one who cannot be named*)

February 2013

This is how you get it -

1. Register at the URL - http://www.jsmag.com/ for JSMag

2. Go to the CART option and use the following coupon codes –> rcmm9pb

3. Go to your account option to download and access your free issue of JSMag Feb 2013!

February 2013

This is how you get it -

1. Register at the URL - http://www.groovymag.com/ for GroovyMag

2. Go to the CART option and use the following coupon code – 7p0d237

3. Go to ‘My Account’ option and select the ‘Review magazine purchases’ to download and access your free issue of GroovyMag Feb 2013!

Simple!

As of writing, this has only 20 uses left! So hurry up and get this while it lasts!

You can thank me in the comments ;-)

Saturday, February 9, 2013

Links for fellow QAs… Contd.

Here is another good collection of QA related tutorials – QATutorial.com

Excerpt from the site itself-

…a website which provides essential Software Testing material for QA and Testing enthusiasts.

Here you would be able to find information on all the different stages and areas of Software Testing.

Some of the Priority Areas being,

* Manual Testing
* Software Test Management
* Software Test Automation
* Interview Questions
* Software Testing Templates.
* A Forum area for discussion.

Do post in your views and links, I will update them here.

Wednesday, February 6, 2013

So you are a QA? Oh wait, don’t answer that!

image

Life may turn on its boring face if you have been a QA analyst (in any software firm) since a while.

Because, well let’s face it, a QA’s job is never easy. He/She is the person without any real (or developer) friends and most of the times, if the poor QA is one of ordinary luck, he handles the repetitive job of manual testing rather than interesting and challenging stuff like automation and scripts and so on.

These poor souls are found going through the same application functionalities day after day (like a zombie), to catch that elusive but obvious bug, which has to rear its ugly head on the staging, and during the client demonstration too!

And yet, it is only a proper QA process which provides that level confidence to both the developers and their customer about the application’s robustness.

So dear QA’s, fear not, as starting today I will make some effort to scout the net and post in or blog here some interesting links on QA fundamentals and topics, which should help some of you get back that spark of self-confidence!

So here we start with the QA section in TheServerSide.

The server side’s QA section titled Software Quality Assurance, contains whitepapers with stress on App-DLC, and the upcoming changes in QA domain WRT the now prevalent mobile and portable platforms too. only caveat is you have to register for access, but this is easy and free too, and completely worth it.

And do get back to me with comments etc. if you want me to mention any specific sites which help you out in your daily QA activities.

Technorati Tags: ,,,,

Tuesday, February 5, 2013

How To - Find GUID (Globally Unique Identifier) of installed programs!

Well, this is for something my friend needed @ work.

Fire up either the local command prompt (start –> cmd) or the PowerShell prompt (for O.S. > Windows 7) – start –> Windows PowerShell

and then on the CLI, just this -

wmic product list

This generates a list of all programs on your computer with their “Globally Unique Identifiers” listed as well.

Will take some time, so be patient!

The PowerShell though, will give a better formatted output than the plain cmd one.

For even more, refer -

wmic product get

and better still save it somewhere like -

wmic product get > C:\ProgramGUIDList.txt

Simple!

 

Technorati Tags: ,,,

Tuesday, January 22, 2013

Samsung Galaxy S4!

The rumored specs -

- Exynos 5 Octa (8-Core) CPU,
- Mali-T658 (8-Core) GPU,
- 4.99″ SuperAMOLED Full HD Resolution Display,
- 2GB of RAM,
- 13 Megapixel Rear facing Camera capable of shooting 1080p Full HD Videos at 30FPS,
- 2 Megapixel front facing camera capable of shooting 720p HD Videos
- Android 4.2.1 Jelly Bean out of the box.

The launch date -

http://cdn.androidincanada.ca/wp-content/web/content/uploads/2013/01/Unpacked2013.jpg

The preview -

GalaxySIV

The Benchmark (IDK!) -

And SamMobile says….

THE DISCLAIMER -

**I do not know if the above is real! So ARM your OWN BS meters!**

And it never ends…Samsung Galaxy S4!
Yeah you wish.

UPDATE: It seems something is actually going to happen as GSMArena is covering the same speculations…Maybe it is sooner than we expect.

Technorati Tags: ,,

Monday, January 14, 2013

Internet’s sad day…

It is a sad day for progress…a rising star is forever extinguished.

Aaron Swartz was a computer programmer, a writer and a fighter. He co-pioneered the RSS 1.0 specification of RSS at an age when other kids have different interests.

He is responsible for Infogami and also helped make Reddit what it is today. His group Demand Progress was one of the first ones to campaign against SOPA and was also a member of Avaaz. I do not know exactly why he took such a step… but I guess his legacy should bring on the changes he so desired in his lifetime.

Rest well champ, for us toiling hands, you will be remembered forever as the harbinger of progress.

Peace.

Wednesday, January 9, 2013

What do you want to do with your life?

Life… if it actually was that easy! If only our day to day choices weren’t governed by that single most important factor…! Yup, money!

But wait. There is some hope, still.

This below, is an info-comic by Zen Pencils…with words and thoughts of Alan Watts.

I hope this helps us all understand the importance and need of self-actualization vs. the artificial stuff which is actually running our lives for us today.

98. ALAN WATTS: What if money was no object?

From the Zen pencils site -

Alan Watts (1915-1973) was an English philosopher and writer who played a large part in popularising Zen Buddhism in the west. He gained a wide following after moving to the United States where he published numerous books on Zen and Eastern philosophy. During the 60s and 70s he toured extensively on the college lecture circuit and became a celebrity among the growing youth movement. Watts had over 25 books published and recorded over 400 lectures, many of which have found a new audience on YouTube.

It surely depends on what you want Vs. what you need, but ultimately if what you do makes you happy, it will eventually help you pay your bills and more…