Lately I have been dabbling with various tools and libraries to improve my skills, and workflow. In the process I have tried Yeoman, which is a collection of tools and best practices to make web development easier and better.

Why Yeoman?

Yeoman comes with a collection of generators, which initialize your project with default set of tools and libraries those might be needed. But many a times, I fealt that one might not need all those tools, and such generators could be overload. Hence, its better to use basic building blocks of yeoman and create a workflow which suits you.

Introducing Grunt & Bower

In simple words Grunt is a JavaScript Task Runner. It lets you automate repetitive tasks like minification, compilation, unit testing, linting, etc.

On the other hand, Bower is a front-end package manager. It allows you to simple include, remove, upgrade various packages available for front-end development. You can see various packages available here.

Get Started

The best way to learn using grunt is with an example. So lets setup a simple web application with grunt and bower. I will be setting up a simple webapp that will include standalone development server, livereload, and compilation of less files.

Grunt

Grunt and Bower are based on node.js, so first install nodejs & npm on your machine. For information you can see node.js

To start with create a directory for your project, say gruntSample. Now your project needs a package.json and a Gruntfile.js. The package.json file is used by npm and should contain the dependencies for your project.
The Gruntfile.js will contain tasks and load Grunt plugins for you. Both of these files should be in the root of your project.

Package.json

You can find detailed information about creating package.json on grunt getting started guide. Here I’ll tell you the way I proceed.

From project directory run following commands.

npm init
npm install grunt grunt-contrib-less grunt-contrib-connect grunt-contrib-watch grunt-open matchdep connect-livereload --save-dev

npm init will guide you though various step in creating initial package.json file, you can go ahead with the default while creating it, and later change it manually.

Second command will install grunt and other grunt packages needed for this project.

Gruntfile.js

Now that we have added the package.json file, we can create Gruntfile.js. Here is the Gruntfile.js which we’ll be using in this sample project.

'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({port: LIVERELOAD_PORT});
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        watch: {
            options: {
                nospawn: true
            },
            less: {
                files: ['app/styles/*.less'],
                tasks: ['less:server']
            },
            livereload: {
                options: {
                    livereload: LIVERELOAD_PORT
                },
                files: [
                    'app/*.html',
                    'app/styles/{,*/}*.css',
                    'app/scripts/{,*/}*.js',
                    'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
                ]
            }
        },
        connect: {
            options: {
                port: 9000,
                // change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            mountFolder(connect, 'app'),
                            lrSnippet
                        ];
                    }
                }
            }
        },
        open: {
            server: {
                path: 'http://localhost:<%= connect.options.port %>'
            }
        },
        less: {
            server: {
                options: {
                    paths: ['app/components/bootstrap/less', 'app/styles']
                },
                files: {
                    'app/styles/main.css': 'app/styles/main.less'
                }
            }
        }
    });

    grunt.registerTask('server', function (target) {

        grunt.task.run([
            'less:server',
            'connect:livereload',
            'open',
            'watch'
        ]);
    });
};

Bower

As already mentioned Bower is the package manager. So to get started you first have to install Bower. For this run following command in Terminal.

npm install -g bower

Then create a file named .bowerrc in project folder, with following content.

{
   "directory": "app/components"
}

This will direct bower to download bower components app/components directory.

Later run following commands.

mkdir app
mkdir app/components
bower init
bower install bootstrap

bower init will guide you to create a file bower.json. This is the file which will contain all the dependencies of the project. Later on production you can simply copy this file and run bower install to install all dependencies.

Project Files

Now lets add some code to test your project setup. Just create following files.

app/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Document</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
    <h2>Hello Grunt!</h2>

    <script src="http://localhost:35729/livereload.js"></script>
</body>
</html>

app/styles/main.less

body{
    font-family: Arial, sans-serif;
}
h2{
    color: red;
}

In our Gruntfile.js we have added just one task to run the development server. This task will internally start a livereload server and will start compiling less to css as and when main.less file is changed.

Just run following command to test if everything is working fine.

grunt server

The command should start server and the should open http://localhost:9000/ in your browser. You can also try changing less / html file, the changes should be reflected on browser without refreshing the page.

Conclusion

In this grunt file we have just added support of compling less files, livereload and starting a development server. If you want you can also add various other tasks as per you requirement, more detailed tutorial can be found here.

I have also put up this sample grunt application on github, feel free to use it. gruntSample

Being a frontend developer if you haven’t yet added Grunt.js to your workflow, then you are seriously missing something. You should surely check it out.

The post Getting started with Grunt & Bower appeared first on NitinH.com.

I’ve been using Apple’s native mail application since the day I bought my first iPhone. Its set up with my gmail using google exchange. Everything seemed perfect, I was able to read emails, reply to them, add pictures, open attachments, it looked complete. So far so good!

Then came Gmail official iPhone application, that made me realize what I have been missing so far. It was having most of the features which I like about its web counterpart. It had great message display, better representation for email thread, above all its search actually worked.

Now we also have Mailbox which made my email organized, soon we’ll also have .Mail.

Current State

Presently I have to use 3 different applications to check and manage my emails.

• Gmail : Whenever I need to see any email conversation thread, and have to search any email.
• Mailbox : For organizing and prioritizing stuff
• Mail App : To read and check new email.

Overall it doesn’t feel right to use 3 different applications for single task of reading and managing emails.

Out of these three, I just don’t want to use Native mail application. Its very limiting when it is compared with other of its compititors. But somehow I keep coming back to it, becuase of its speed. As soon I get notification for a new mail, there is an instant urge to check it, but if you check it using any app other then native Mail you’ll have to wait for the message to download. And this wait time is really annoying.

iWish

Here, I’d wish Apple to comeup with some mechanism so that, applications other than native could also get full email messages in background. So that, when I open their notifications, email/messages are there (no loading indicator).

It would also be great if magically somehow, search and autosuggest of gmail’s app could also be there in other applications. If this could happen then I can peacefully just use Mailbox (which I am loving by the way).

This is how I use email application, what about you? Are you also stuck in hell of email apps.

The post Hell of email applications on iPhone appeared first on NitinH.com.

In last couple of years you must have seen countless examples of responsive designs. Most of the websites are either already responsive or are planing for a responsive re-design. As we see more and more devies, this trend is likely to continue in near future as well. Pete Cashmore from Mashable has already declared 2013 as the year of Responsive Designs.

Developers mostly uses Fluid Grid, or Media queries to make the website adaptive. The basic technique is to viewport width and render content according to that. You can refer these excellent articles, for more information on Responsive Design.

Vertically Responsive Design

Recently I came across a very simple yet brilliant technique to adjust the content based on available height as well. The website which implement this is of San Francisco advertising agency, Venables Bell and Partners. Just go and have a look at the website, also try changing the height of the browser.

You must have noticed that the content width also changes as per available height. The information blocks are resized while maintaining aspect ratio. I found this technique very useful, as it can also be used to show important messages above the fold. This could surely increase the visibility of important links, buttons.

Pure CSS Approach

Everything with the Vanables website was perfect expect for the fact that it was using Javascript to figure out viewport size. Viewport is then used to calculate container width/height. As today’s browsers are getting more and more advanced and with these new CSS capabilities I thought similar functionality could also be replicated using CSS only. I quickly mocked up a demo which was purely built using CSS3 without using any javascript.

You can have a look at the demo here:

Vertically Responsive Design Demo

Try playing with the browser height, and watch how “Sign up” block keeps at the bottom of the page. The container auto scales based on the viewport size while maintaining aspect ratio.

Now some code

The CSS technique which came for the rescue are Viewport Percentage Length and CSS Calc. The main css properties for the upper block are

.container{
	min-width: 600px;
	max-width: 1080px;
	min-height: calc(690px * (90/150));
	height: 90vh;
	width: 150vh;
}

Setting height as 90vh, means 90% of the viewport height. Later we simply can relatively place signup container inside that. Utilizing Viewport Percentage Length make it easier to keep the aspect ratio maintained at any given viewport size.

Browser Support

Viewport Percentage Length is supported across Chrome 21+, Firefox 19+, IE 10+, Safari 6+. For detailed and updated browser refer CanIuse : Viewport Units and CanIuse : CSS Calc.

In my opinion its pretty interesting way to position important content. What your say on this?

The post Vertically Responsive Design : Keeping Things Above The Fold appeared first on NitinH.com.

In the jungle of Javascript 2D Canvas Libraries we have chosen KineticJS for the development of Polo. As there were so many libraries, It was a tough choice. Each library comes with their own pros and cons. We have selected KineticJS mainly for following reasons:

• Its has got an easy api to let us draw shapes, group them together with layering support
• Collection of rich examples, showcase of each feature give quick understanding
• Currently under active development, so we can assume timely updates and quick issue resolution

About verticalAlign

During the development I had to place some text vertically in middle of its container. The quick way to do that could have been to set container and text-block to same size and then vertically align text in center.

But on searching I came to realize that the support for verticalAlign has been temporarily dropped from KineticJS. You can see references for the same here and here. The maintainer of KineticJS ericdrowell says that, the support for the same will be added back in the v4.3.5 release.

So in the meanwhile to solve this issue I did a quick patch in the source. Just replace following lines in KineticJS.Text drawFunc function.

// Temporary fix for verticalAlign
// this issue is set to be resolved in ver:4.3.5
// https://github.com/ericdrowell/KineticJS/issues/281
var verticalpos = 0;
if(this.attrs.verticalAlign === 'bottom') {
    verticalpos = this.getHeight() - this._getTextSize(text).height - p * 2;
}
else if(this.attrs.verticalAlign === 'middle') {
    verticalpos = (this.getHeight() - this._getTextSize(text).height - p * 2) / 2;
}

// horizontal alignment
context.save();
if(this.getAlign() === RIGHT) {
    context.translate(totalWidth - width - p * 2, verticalpos);
}
else if(this.getAlign() === CENTER) {
    context.translate((totalWidth - width - p * 2) / 2, verticalpos);
}

These lines have to come in place of horizontal alignment code. For more information please see this commit.

With this I was able to position text vertically in MIDDLE, TOP, BOTTOM. I have not submitted a pull request for the same, as I am not aware of its dependencies. Nevertheless this issue is already in the pipeline and will be resolved by, v.4.3.5.

It was a quick fix just to get this going. Hope this will help you as well.

Happy Coding

The post Quick Hack To Get VerticalAlign Working On KineticJS.Text appeared first on NitinH.com.

Download it here : Social Connect Buttons [psd]

The post Facebook, Twitter, Instapaper Connect Buttons appeared first on NitinH.com.

How can I dynamically hide any element using Javascript ?

The obvious solutions to this is to set “display” style to “none”. Something like this:

document.getElementById('element').style.display = 'none';

This will surely work, but is it the correct way to do so? May be not, as you would face problems in showing that element again. The problem in showing that element is that you don’t know the original display property of that element. Whether it was a “Block” level element or an “inline” element. So, basically you’ll have to do something like this, depending upon type of element:

document.getElementById('element').style.display = 'block';
document.getElementById('element').style.display = 'inline';

Can we do it in some better way?

Now do it proper way

An improved way to achieve similar thing is to create a css class like this:

.hide{display:none !important;}

And now just add or remove this class to hide and show elements.

document.getElementById('element').className = 'hide';

or write $(“element”).addClass(‘hide’); if you are using mootools.

The post How to Properly Hide and Show Elements Using Javascript appeared first on NitinH.com.

How to Install Git on Webfaction

1. Log into your Webfaction Control Panel
2. Navigate to Domains/Websites » Applications
3. Click Add New
4. Enter git as the application name in the Name field
5. Select git from the App category menu
6. Enter a password for the default user in the Extra Info field
7. Click the Create button

The Git application provides a subdirectory, bin, which contains the Git executables. It also provides a subdirectory, repos, to store your Git repositories. repos/proj.git has been created automatically as an example.

Later you’ll have to create a Website (Domain/Website -> Website, in Control Panel), which maps this newly created Git application to some subdomain. For further explanation i’ll assume this domain to be “git.domain.com”

If you want you can delete existing proj.git by simply deleting this directory.
rm -r ~/webapps/git/repos/proj.git

Create a new Git Repository

1. Open an SSH session to your webfaction account: ssh username@username.webfactional.com
2. cd ~/webapps/git/
3. ./bin/git init --bare ./repos/reponame.git
   This will create a new repository, where reponameis the name of your repository
4. cd repos/repo.git
5. ../../bin/git config http.receivepack true
   This will enable HTTP push to repository

Pushing local code to this repository

1. cd /path/to/your/local/repository/
2. git init If it’s not already under version control
3. git add .
4. git commit -a -m 'Initial commit.'
5. If you want to use SSH mode then
   git remote add origin ssh://username@git.domain.com/~/webapps/git/repos/reponame.git
   For HTTP Mode
   git remote add origin http://username@git.domain.com/reponame.git
6. git push origin master
7. git push

Final Command should give you Everything up-to-date message.

Introduce Yourself to Git Server

It is a good idea to introduce yourself to git with your name and public email address before doing any operation. The easiest way to do so is:
git config --global user.name "Nitin Hayaran"
git config --global user.email you@yourdomain.example.com

Troubleshooting

On giving git push origin master command git may throw error error: RPC failed; result=22, HTTP code = 411. It will show you message like this:

Compressing objects: 100% (792/792), done.
error: RPC failed; result=22, HTTP code = 411
Writing objects: 100% (1148/1148), 18.79 MiB | 13.81 MiB/s, done.
Total 1148 (delta 356), reused 944 (delta 214)

This error comes when either your code size is big, or there is any file with big size. To solve this problem you need to increase buffer size in Git configuration.
git config http.postBuffer 524288000

Clone Your Repository Somewhere New

With SSH Mode Setup
git clone username@git.domain.com:webapps/git/repos/reponame.git
For HTTP Push Mode
git clone http://username@git.domain.com/reponame.git

Further Information

• Webfaction’s Git Documentation

The post GitHub Setup on Webfaction : How To ? appeared first on NitinH.com.

The Third and final problem of the Facebook Qualification 2011 Round was Studious Student. The problem goes like this:

Studious Student

You’ve been given a list of words to study and memorize. Being a diligent student of language and the arts, you’ve decided to not study them at all and instead make up pointless games based on them. One game you’ve come up with is to see how you can concatenate the words to generate the lexicographically lowest possible string.

Input

As input for playing this game you will receive a text file containing an integer N, the number of word sets you need to play your game against. This will be followed by N word sets, each starting with an integer M, the number of words in the set, followed by M words. All tokens in the input will be separated by some whitespace and, aside from N and M, will consist entirely of lowercase letters.

Output

Your submission should contain the lexicographically shortest strings for each corresponding word set, one per line and in order.

Constraints

1 <= N <= 100
1 <= M <= 9
1 <= all word lengths <= 10

Example input

5
6 facebook hacker cup for studious students
5 k duz q rc lvraw
5 mybea zdr yubx xe dyroiy
5 jibw ji jp bw jibw
5 uiuy hopji li j dcyi

Example output

cupfacebookforhackerstudentsstudious
duzklvrawqrc
dyroiymybeaxeyubxzdr
bwjibwjibwjijp
dcyihopjijliuiuy

Analysis and Solution

This problem is a most confusing out of the lot. Me myself made a silly mistake while solving this problem. On first look it looks like the problem should get solved by sorting and joining the strings, but its not like that.

Consider this following input:

jibw ji jp bw jibw

By sorting and concatenate, the answer should be is:

bwjijibwjibwjp

However, lexicographically lowest possible string will be:

bwjibwjibwjijp

Notice in the above words, "ji" is the prefix of "jibw". The "sort and concatenate" method definitely does not work when there is a case where a word is a prefix of one or more other words.

Some of the contestants solved this problem with brute force, as input range was not that big. With M<=9 one could have only 9!= 362880 possible permutations. And answer can be obtained by sorting these permutations.

However, I didn’t went this approach. I used python internal Sort function with custom compare. Here is my code

The post Facebook Hacker Cup : Studious Student Problem Solution appeared first on NitinH.com.

Continuing with my earlier solution of the First Problem “Double Square”, here is solution and analysis for Second Problem “Peg Game”

Peg Game

At the arcade, you can play a simple game where a ball is dropped into the top of the game, from a position of your choosing. There are a number of pegs that the ball will bounce off of as it drops through the game. Whenever the ball hits a peg, it will bounce to the left with probability 0.5 and to the right with probability 0.5. The one exception to this is when it hits a peg on the far left or right side, in which case it always bounces towards the middle.
When the game was first made, the pegs where arranged in a regular grid. However, it’s an old game, and now some of the pegs are missing. Your goal in the game is to get the ball to fall out of the bottom of the game in a specific location. Your task is, given the arrangement of the game, to determine the optimal place to drop the ball, such that the probability of getting it to this specific location is maximized.

The image below shows an example of a game with five rows of five columns. Notice that the top row has five pegs, the next row has four pegs, the next five, and so on. With five columns, there are four choices to drop the ball into (indexed from 0). Note that in this example, there are three pegs missing. The top row is row 0, and the leftmost peg is column 0, so the coordinates of the missing pegs are (1,1), (2,1) and (3,2). In this example, the best place to drop the ball is on the far left, in column 0, which gives a 50% chance that it will end in the goal.

x.x.x.x.x
 x...x.x
x...x.x.x
 x.x...x
x.x.x.x.x
 G  

'x' indicates a peg, '.' indicates empty space.

Input

You should first read an integer N, the number of test cases. Each of the next N lines will then contain a single test case. Each test case will start with integers R and C, the number of rows and columns (R will be odd). Next, an integer K will specify the target column. Finally, an integer M will be followed by M pairs of integer r_i and c_i, giving the locations of the missing pegs.

Constraints

• 1 ≤ N ≤ 100
• 3 ≤ R,C ≤ 100
• The top and bottom rows will not have any missing pegs.
• Other parameters will all be valid, given R and C

Output

For each test case, you should output an integer, the location to drop the ball into, followed by the probability that the ball will end in columns K, formatted with exactly six digits after the decimal point (round the last digit, don’t truncate).

Notes

The input will be designed such that minor rounding errors will not impact the output (i.e. there will be no ties or near — up to 1E-9 — ties, and the direction of rounding for the output will not be impacted by small errors).

Example input

4
5 4 0 1 2 2
3 3 1 2 1 1 1 0
3 4 0 2 1 0 1 1
3 4 0 1 1 1

Example Output

0 0.375000
1 1.000000
0 1.000000
0 0.500000

Analysis and Solution

This is the hardest problem of the lot, and I also spent hours to understand the problem statement. If you are also among those who haven’t got this problem then, I would recommend you to read its explanation here.

Once I understood problem statement, next hurdle was to have map this in programming paradigm. I went with a double size two-dimension array [row*2, col*2], to hold complete Input. Basically it was holding both Pegs, and Pits(blank space from where ball can pass).

For solving the problem I approached it from bottom, assuming that to get ball at X and probability 1. Then we move to above row and back calculate possible probabilities for every pit.

The code to solve this problem is:

The post Facebook Hacker Cup : Peg Game Problem Solution appeared first on NitinH.com.

A lot of people have participated and qualified in Qualification Round of Facebook Hacker Cup. Luckily I am also qualified for First Round. Facebook Hacker Cup Qualification Round consisted 3 problems. All of these problems were programmatically easy but tricky. Lots of people made very simple mistakes while solving these problem(including me).

First Problem of the round was:

Double Squares

A double-square number is an integer X which can be expressed as the sum of two perfect squares. For example, 10 is a double-square because 10 = 3²+ 1². Your task in this problem is, given X, determine the number of ways in which it can be written as the sum of two squares. For example, 10 can only be written as 3² + 1² (we don’t count 1² + 3² as being different). On the other hand, 25 can be written as 5² + 0² or as 4² + 3².

Input

You should first read an integer N, the number of test cases. The next N lines will contain N values of X.

Constraints

0 ≤ X ≤ 2147483647
1 ≤ N ≤ 100

Output

For each value of X, you should output the number of ways to write X as the sum of two squares.

Example input

5
10
25
3
0
1

Example output

1
2
0
1
1

Analysis and Solution

This problem was by far the easiest of the lot. But as Facebook title for the problem said “Too hard for brute force, switching to dp”, this problem was almost impossible to be solved with Brute Force.

The strategy I used was quite simple. If we consider M is the given number, and we want to find out x, y such that:

M = x^2 + y^2

So basically we’ll loop from 0 to sqrt(M) and will find out D such that:

D = M – i*i

and if D is square root is an integer then, this number is a double square.

The python code of this problem is:

The post Facebook Hacker Cup : Double Squares Problem Solution appeared first on NitinH.com.