Monday, 7 July 2014

A/B Testing using Google Experiments


Hope you all had a good weekend. I really had fun. A few days back my manager threw some light on A/B testing with the help of Google. And that is the reason why I am writing this blog.

What is A/B testing?

In short, it is a way to improve the customer experience and thereby increase revenue from your website. You can search in Google to find the best definition. 

How Google helps?

Google helps you to create 10 different variations of your content and also provides library/SDKs to integrate the variations in your application. It is called Google Content Experiments. It offers 3 different ways of implementing it.

Saturday, 5 July 2014

Resize image in HTML

Hello folks,

Lets have a look at the various ways in which an image can be re-sized in an HTML page. I will classify it into 3 different sections. Re-sizing of a background image, regular img tag and sprite image. If you are interested only in re-sizing a sprite image directly jump to last section.

Section 1: How to re-size a background image?

I am sure many of you might be familiar with the background property. It is actually a short-hand property for many other properties; mainly background-image. Look at the example given below.

 html {
  background: url('worldcup.jpg') center center no-repeat; 

This will render the image at the center of your page with actual size. Using background-size property, you can re-size the image in different ways.

Tuesday, 3 June 2014

JUnit Parameterized TestCases


Last few days I was working on selenium based automation testing. During the development of a framework I came across few interesting elements in JUnit4. Today we are going to talk about running testcases with parameters.

A common scenario

In many situations you might have to create multiple JUnit TestCases which are identical except for the input data. For example, if you want to test a form page with multiple values for the same field, you will end up in creating identical test cases with different input values.

Don't create multiple TestCases

You can get rid of creation of identical testcases with the help of Parameterized runner. I will give the steps for creating a Parameterized test case.

  1. Create your test case
  2. Annotate it with Parameterized                                                                                                           
  3. Create a static method that returns a Collection of Object Array. Also annotate it with Parameters     
  4. Create a constructor with the same number of arguments as given in the array                                          
  5. You are done. Now run the testcase!
You can notice that each test method is executed for each item in that collection. 

Good day!

Thursday, 13 February 2014

Complete HTML5 portlet management system


Last day I had a discussion with one of my friend regarding portlets. He asked me whether it is possible to have a portlet management system completely on the client side. In this article I shall try to find out a client only solution (which you may or may not agree).

Java Portlets, Liferay portlets

You may be already knowing about portlets in Java, JSF and Liferay. JavaScript cannot compete with any of these as it is processed on the server side. JavaScript does not have the power of permanent storage too. The only option left to us is the use of localStorage or file API (which is not yet implemented in many of the browsers).

Monday, 10 February 2014

Make your app voice interactive!

Hello all,

Today I want to talk about speech synthesis APIs in HTML5 which helps you to listen to your application. Currently implemented by a very few browsers such as Chrome, Chromium(version 33 onwards on both web and mobile), Safari web and mobile on iOS7. You can download chromium33 here.

Speech synthesis API

Copy paste following code to your favorite editor and save it as an HTML and open it in the browser installed earlier.

Thursday, 2 January 2014

CSS3 MediaQuery events in JavaScript!


Recently I came across some interesting elements in CSS3. Consider a responsive/fluid webapp where mediaqueries are used for different resolutions. Probably you might have defined all the required styles in the respective media-queries and the UI will render accordingly. But what if you want some additional stuffs to be done during that change? Today we will see how to resolve this issue.

New DOM events

There are different DOM events added after the introduction of CSS3. Few of them are animationStart, animationStop, transitionStart, transitionEnd etc. We will focus on animation events in this chapter.

matchMedia Web API

This API returns a new MediaQueryList object representing the parsed results of the specified media query string. You will find the details in the following code sample.

Friday, 20 December 2013

AriaTemplates: PageEngine for navigation


Today I would like to talk about some interesting aspect of AriaTemplates aka AT. Navigation is handled in AT using a mechanism called PageEngine. We will have a small demo of PageEngine today/

Read more Why AT?

Architecture of PageEngine

Wednesday, 18 December 2013

ARIA TEMPLATES - An introduction


Last few days I was playing around a relatively unknown JavaScript application framework called ARIA TEMPLATES aka AT. Not sure who all are using these framework to build web applications, but still it is worth giving a try if you are looking for a template engine built on MVC pattern. AT also provides a router/navigation mechanism across views in a single page application. Continue reading if you are still interested! ;)

Why another templating framework?

There is no proper answer to this question. There are many templating frameworks available in market; even you can create a template pattern with 30 to 40 lines of JavaScript code. AT is under active development and new features are getting added in every release. It is capable of competing with any other templating framework available today. After all learning a new framework is a piece of cake for many JavaScript developers.

Monday, 16 December 2013

HTML5 - History API


Today I would like to introduce you to the history API of HTML5. This feature is very helpful in a hybrid application where you want back and forward buttons are to be implemented.

How to get back/forward button events?

The global object window provides an event called popstate which will be invoked when user clicks on back/forward button. In case of CHROME and SAFARI, the same event will be invoked when the page is loaded too.  

 window.addEventListener('popstate', function(event){  

Wednesday, 6 November 2013

SSO Application in Android


In my previous blog , I talked about SSO and OAuth2.0 protocol from a developer's point of view. Here we will discuss how to create an SSO application Android. Those who are not interested in SSO can consider this as an introduction to Android services.

Why not Android library?

If the question is to share a few data such as access token, refresh token or ttl, why can't we use an Android library so that each app can import this library and use various APIs? To answer this question we need to understand various storage options in Android for the requirement we have.