Saturday, 13 July 2013

Continuous Development and Deployment of CodeIgniter using Git

I have had serious problems with continuously developing and deploying enhancements to web applications in CodeIgniter. The problem is that the deployment version has different set of configurations than the development version. Usually, these are sensitive configurations like database connection settings. So even if I missed a single configuration, the result is that the website is down. This made making quick enhancements very difficult. Git helped me come out of it.


Assume that you begin a new project and coded up to a point that you feel it's time to deploy it. Now just create a separate branch named deploy from master at that point.
git branch deploy
git checkout deploy
Once you branched its time to change the configurations to suit the deployment environment. Usually in CodeIgniter it resides at the application/config path. Once changed, commit it.
git commit -m "Deploy config updated"
Now the first version of your application to be uploaded is ready. You can upload it to the server.

Now comes the enhancement part. When you need to enhance it. Just checkout the master branch and start making enhancement to it.
git checkout master
Once the enhancement is over just merge it to deploy branch.
git checkout deploy
git merge master
This makes sure that the deploy branch is having all the enhancements made along with the configuration for the deployment which was there already in deploy branch. Now you can just upload it to the server and the enhancement becomes live successfully. It is very very rare to face a merge conflict here as we are not going to change the settings every now and then. This will allow people concentrate on development and stop spending more time in deploying code enhancement.

Now you can just upload the files at the deploy branch to the server. This is how I develop Encollege.

Now you can switch back and forth to master and deploy. When you develop locally use master and you can run & test in local environment. When you want server uploadable version of your local development, checkout deploy and merge master to it.
 

Thursday, 11 April 2013

Windows Phone Tiles Using CSS and jQuery

Windows Phone's tile design is a haunting beauty to me. I never knew a layout of neat square boxes can impress me that much. And so I tried to implement that tile design in web using CSS and jQuery.  I have tried only the Tile Flip animation which can show two different information one at the front side and another at the back side of the tile.

DemoDownload


First we are going to create the html content for the tiles to be created as shown in the below image. Each tile contains two divs front and back. Both can contain information to be shown. The following html code produces the desired arrangement of tiles.

Tile design along with CSS class names

<div class="container">
    <div class="tile tile-normal">
        <div class="front">
            <img class="icon" src="ie.PNG" />
        </div>
       <div class="back">
            Internet Explorer
       </div>
    </div>
    <div class="container-small">
        <div class="tile tile-small">
            <div class="front">1</div>
            <div class="back">Tile 1</div>
        </div>
        <div class="tile tile-small">
            <div class="front">2</div>
            <div class="back">Tile 2</div>
        </div>
        <div class="tile tile-small">
            <div class="front">3</div>
            <div class="back">Tile 3</div>
        </div>
        <div class="tile tile-small">
            <div class="front">4</div>
            <div class="back">Tile 4</div>
        </div>
    </div>
    <div class="tile tile-wide">
        <div class="front">
           Windows Phone Tiles using CSS and jQuery
        </div>
        <div class="back">
           This is a wide tile
        </div>
    </div>
</div>

The CSS takes care of size and alignment of the tiles. (Please download the source code and check). Here I would like to highlight the important part of CSS which creates the perspective view when the tile rotates.

.tile {
    float:left;
    font-family: 'Roboto', sans-serif;
    font-size:20px;
    margin-left:2px;
    margin-top:2px;
    
    -moz-perspective:500px;
    -webkit-perspective:500px;
    -o-perspective:500px;
    -ms-perspective:500px;
    perspective:500px;
}

jQuery takes care of the Tile Flip with the following code. Here I have used Transit for animation which is a jQuery extension. It is really great for smooth animations and provides lots of ease techniques which is very much needed in our case as the normal simple ease will make the Tile Flip look like two pieces of animation.

$(document).ready(function () {
    
    $(".back").hide();
    
    $(".tile").mouseenter(function () {
        $(this).children(".front").transit( {
            "rotateX":"90deg"
        },500,"easeInCirc",function () {
            var back;
            $(this).hide();
            back = $(this).siblings(".back");
            back.css({
                "rotateX" : "-90deg"
            });
            back.show();
            back.transit( {
                "rotateX":"0deg"
            },500,"easeOutCirc");
        });
        
    });
    
    $(".tile").mouseleave(function () {
        $(this).children(".back").transit( {
            "rotateX" : "90deg"
        },500,"easeInCirc",function () {
            var front;
            $(this).hide();
            front = $(this).siblings(".front");
            front.css({
                "rotateX" : "-90deg"
            });
            front.show();
            front.transit({
                "rotateX" : "0deg"
            },500,"easeOutCirc");
        });
    });
});

Initially all the backs of tiles are hidden and rotateX is -90 deg .  And fronts are visible and rotateX is 0 deg. All the tiles filp at mouseenter and flip again at mouseleave.


The above diagram explains the working of the function on mouseenter. mouseleave works in similar way.

This design makes use of CSS perspective property which is implemented only in latest versions of few browsers. I have tested it and found working on Firefox 20.0 and Chrome 26.0. Better you have hardware graphics rendering in for Chrome.  If your browser doesn't support perspective, still it should work in orthogonal view.

Tuesday, 12 March 2013

Sticky Notes using CSS3 and jQuery

Most of us are good users of Sticky notes application of Windows which is quite a good tool for quick notes to remember. I got inspired by that and tried to create a simple web Sticky Notes using CSS3 and jQuery.


The entire look and feel of Sticky Notes is taken care by CSS3 and creating & deleting notes are done using jQuery.

DemoDownload

<body>
  <div id="note-space"></div>
  <div id="note-template">
    <div class="note-head">
      <div class="new-button note-head-button">+</div>
      <div class="delete-button note-head-button">&times</div>
    </div>
    <textarea></textarea>
  </div>
</body>

In the above code note-space is the div in which all notes will be residing where as note-template is just a template which describes the structure of the note and it is not visible. note-template will be cloned whenever we create a new note and placed into note-space.

<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>

Make sure you include the font Handlee from Google Webfonts by adding the above code on the head section followed by your CSS file, followed by jQuery, followed by your script file.

Following is the CSS

body {
    background-image: -moz-linear-gradient(top, #f6f6f6 0%, #cccccc 100%);
    background-image: -ms-linear-gradient(top, #f6f6f6 0%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #f6f6f6 0%, #cccccc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f6f6f6), color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f6f6f6 0%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #f6f6f6 0%, #cccccc 100%); 
}

#note-template {
    display: none;
}

.note {
    background-color: #FEF4AC;
    background-image: -ms-linear-gradient(top, #FEF4AC 0%, #F4E183 100%);
    background-image: -moz-linear-gradient(top, #FEF4AC 0%, #F4E183 100%);
    background-image: -o-linear-gradient(top, #FEF4AC 0%, #F4E183 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEF4AC), color-stop(1, #F4E183));
    background-image: -webkit-linear-gradient(top, #FEF4AC 0%, #F4E183 100%);
    background-image: linear-gradient(to bottom, #FEF4AC 0%, #F4E183 100%); 
    box-shadow: 0px 0px 5px 2px #dddddd;
    display: inline-block;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    min-width: 200px;
    min-height: 200px;
}

.note:first-child {
    margin-left: 10px;
}

.note textarea {
    background-color: transparent;
    border: none;
    font-family: 'Handlee', cursive;
    font-size: 16px;
    height: 180px;
    margin: 10px;
    min-width: 200px;
    min-height: 180px;
    padding-top: 10px;
    width: 200px;
}

.note-head {
    padding: 10px;
}

.note-head-button {
    border: solid 1px #cccccc;
    border-radius: 5px;
    color:#cccccc;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0px 0px;
    text-align: center;
    text-shadow: 1px 1px #ffffff;
    width: 20px;
}

.note-head-button:hover {
    border: solid 1px #aaaaaa;
    color:#aaaaaa;
}

.new-button {
    float: left;
}

.delete-button {
    float: right;
}

Now when the document loads, the following script executes.

$(document).ready(function() {
    $("body").height($(window).height());
    $("body").delegate(".new-button","click",newNote);
    $("body").delegate(".delete-button","click",deleteNote);
    newNote();
});  

In the above code, we delegate the click event of new-button and delete-button to newNote and deleteNote correspondingly. Why didn't we us click(fn) of jQuery here? The reason is that delegate ensures even newly created new-button and delete-button will be also handling the event which is not the case with click(fn).

It also creates a new note at when the page loads. To create a new note use the following code.

function newNote() {
    var temp = $("#note-template").html();
    $("<div class='note'></div>").html(temp)
                .appendTo("#note-space");
}

And delete a note use the following code.

function deleteNote() {
    $(this).parents(".note").remove();
}

I tried to make this as simple as possible. By working on it more, you can end up in a very good application. For example, the textarea doesn't grow as you type longer text, instead scroll bar appears which is not a pleasant design. You can try avoiding it using the following API which helps textarea grow automatically.

https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js


Tuesday, 5 February 2013

Using Labels Inside Text Field, Is That Wrong?

Today, I got the chance to read the article by Don’t Put Labels Inside Text Boxes (Unless You’re Luke W). In that article, Caroline tries to address the problem of using anything inside a text box. Whether it is label or hints. This really pulled me to write this article. I don't exactly remember when I met the first form with labels inside the text box, but since then I have been fan of labels inside text fields both as an user and designer.


I strongly believe designing doesn't have any holy rules that has to be kept by all the generations. With the advent of mobile and tablets, the design of web forms started to change. Anything in design is acceptable when the people have the mindset of accepting it. People already started to accept label inside text fields in mobiles. Once they are accepting there, designers tries to bring the same to general web too. Users need not be taught again.

When the form is so big and it is regarding specific business needs, designers will not be interested in placing the labels inside the text field. But hints can be placed and they are not a hindrance either. People are easily making out hints and designers help them do so with dull colored hint text, italic text, hide on click techniques.

Moreover, increase in the number of tablets has also to be kept in mind. Tablets are having fingers as pointers, not mouses and so slightly bigger text boxes will be easy to select. Bigger text boxes take the spaces of the label and so labels come inside text boxes. I think this trend will reflect in more number of websites as the tablet population increase.

Caroline also mentioned,
If you’re presenting a form that people will use a lot or a form that follows a very familiar pattern—such as user name and password—users can sometimes learn what goes where and ignore the labels. This is somewhat similar to the way that people have learned to ignore another Web annoyance, the intrusive banner.
Does people really feel using labels inside text equal to intrusive banner? or even annoyance? I don't think so. Instead I see them enjoying rich designs.

When designers try to make signature look and feel, some rules are broken. But this helps to enhance user experience and not disturb it.

Tumblr and Twitter are two example for making perfect use of labels inside text boxes.

Bottomline : You don't need to be a Luke W to find situations to use labels inside text fields.

Monday, 19 November 2012

Saving Tweets to MongoDB using Java

MongoDB is the fastest growing NoSQL database. Apart from the advantages of NoSQL technology, it's JSON querying style, easy installation makes it more preferable. In this article I'm going to show you how to save tweets into MongoDB using Java.

Here I'm going to use Twitter Search API to get the tweets in the form of JSON and save it to the database. Previously I have tried this with the MySQL. I think MongoDB has some very good advantages.
  • We don't have to create a schema for the database where we are going to store the tweets. If you closely see the structure of data returned by the search API, It would require you at least five tables to implement in RDBMS
  • Each tweet has different set of attributes associated with it. Some contain mention information, some contain retweet information, geo location, URLs and a lot more. This could be stored without designing complex database schema
  • MongoDB drivers has built-in support for JSON. JSON being the primary choice of many web services, this becomes a great advantage.
  • Twitter may add or remove some of the properties from the result returned by the search API. This will not affect our program.
  • Querying the database has become easier and efficient. We don't need to use Join any more.
You can download the Java driver for MongoDB here. The following simple code is enough to do our task.
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;

import com.mongodb.BasicDBList;
import com.mongodb.BasicDBObject;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.DBObject;
import com.mongodb.Mongo;
import com.mongodb.util.JSON;

public class Main {
    
    public static void main(String args[])throws Exception {
        System.setProperty("java.net.useSystemProxies", "true");
        
        //Connecting to MongoDB
        Mongo m = new Mongo();
        DB db = m.getDB("twitter");
        DBCollection coll = db.getCollection("tweets");

        //Fetching tweets from Twitter
        String urlstr = "http://search.twitter.com/" +
                "search.json?q=mongodb";
        URL url = new URL(urlstr);
        URLConnection con = url.openConnection();
        BufferedReader br = new BufferedReader(
                new InputStreamReader(con.getInputStream()));
        int c;
        StringBuffer content = new StringBuffer();
        while((c=br.read())!=-1) {
            content.append((char)c);
        }
        
        //Inserting tweets to database        
        BasicDBObject res = (BasicDBObject)
                JSON.parse(content.toString());
        BasicDBList list;
        list = (BasicDBList)res.get("results");
        for(Object obj : list) {
            coll.insert((DBObject)obj);
        }
        m.close();
    }

}
To verify, log into the database terminal and type the following commands and you will be able to see all the tweets in the form of JSON.
>use twitter
>db.tweets.find();


Different Technologies Preferred at Different Locations

I wanted to find which part of the world are searching for a particular technology more, assuming this implies that part of the world is using that technology the most. Google Trends is the amazing tool that I turned to, where you can give a search query and find all the stats related to that search query.

I tried with queries like 'java', '.net', 'php', 'abap', etc. Most of the time India appeared to be the country most searching for these keywords, leaving all the other countries far behind. So I drilled further down to Indian Cities and tried with the same keywords which are quite popular technologies. To my surprise, each city seemed to have adopted a technology.

Google Trends normalizes the search data in a scale of 100. So the city with Search Volume Index 100 is the city which searches for that technology the most. I limited to a few popular technologies here.

Java - Bangalore

.NET - Chennai

PHP - Trivandrum

SAP ABAP - Hyderabad


Monday, 8 October 2012

Convert Photos to CSS3

Few days ago I saw a link bearing the title 'Monalisa using CSS3' repeatedly in Facebook and Twitter. When I checked it out, I was totally impressed. A Monalisa picture made by just using CSS3 alone. To be more precise box-shadow property of CSS3 alone. It was done by Jay Salvat using a PHP program which he had uploaded on his GitHub. He has done an incredibly innovative work.

I just went through the CSS to understand what he has done and as soon as I understood, the next thing I wanted to was to create a program that produces a CSS3 made image from a given picture using my favorite tool java. I didn't go through his implementation since I wanted to have my own algorithm to do that. Check out my implementation on the following link.


All you need to give is input image's filename in the Main.java program and it will produce photo.html which has the CSS3 made image.

Here is a sample CSS3 made image of Avatar.

It was produced by the following CSS3 code at CodePen. Check it out at my account CodePen.


How it works? 

The image is made of a matrix of shadows. Each shadow carries a color almost similar to a pixel of an image. However we don't create as many shadows equal to the number of pixels of an image. We take the average of colors of n x n pixels (n = 5 in this example, n is equal to spread) through out the image and produce a shadow for every n x n pixel block of the same color. My program does the same automatically and produces the CSS needed to replicate an image.

This idea is Jay Salvat's and all credit goes to him. I just tried its Java implementation for Java freaks.