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.

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

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.

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();

Related Posts

• Search Twitter from your Program
• An Analysis on Twitter's Leaked Passwords
• IPL Twitter Team Battle

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

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.

https://github.com/fareez-ahamed/cssphoto

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.

IPL Twitter Team Battle

Integration of Twitter is the new addition to this IPL (Indian Premiere League) season. While the entire world is turning towards social networks for marketing and promotion, IPL is no exception. Twitter Team Battle and counting the number of tweets related to IPL are the features implemented by IPL. Twitter Team Battle is an interesting one and many of us participated to support our teams. To the people who have no idea what it is, I wish to put it like this ‘All the tweets with #CSK hashtag are counted to CSK and the tweets with #KKR hashtag are counted to KKR and their percentage is displayed. Team with more tweets wins the battle’ (As in the case of this IPL final).

How it works?

Twitter gives many ways to search the tweets through various APIs each one having certain property. Recently I had written the article ‘Search Twitter from your Program’. I made use of the Twitter Search API to search the recent tweets from Twitter in that. Twitter Search API does not need an authentication and it can make only 150 requests to the server per hour. A better one named Stream API is there which makes 350 requests to the server per hour. But I think even this is not enough for IPL Twitter Team Battle. Twitter is selling its large volume of tweets to third parties such. Anyone can get large amount tweets from the third parties at some cost. Probably IPL should be doing that (I’m just trying to reverse-engineer the system, so what I'm telling is assumption and not fact). They get the tweets from the third parties and count the hashtags to produce the result. This has made the Twitter Team Battle possible.

Future of Twitter Tweet Battle

Is that all we can do with Twitter? Really not, Twitter has infinite possibilities and I’m quite sure IPL will be exploiting that in future. Here I would like to suggest an idea which seemed interesting to me. In the current Twitter Battle we are getting only the percentage tweets for each team, ‘How it would be to get what is the hot topic among them?’, Yes its possible. All the tweets which are tagged with either of the teams should be passed to form a word cloud. A word cloud is picture of numerous words of different sizes. The most frequent word on the tweets will be shown very large than the others. The size of a word is directly proportional to the number of times it is used on the tweets (Sorry, I couldn’t avoid this engineering statement). I tried to make an imaginary picture of how it would be if implemented.

 Lets wait and see how IPL improves Twitter Team Battle in future.