
Of course, every developer knows how to call a JavaScript function - it's just a [basic thing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#calling_functions). But bear with me, I will share some additional information about calling a function. (psst! do you know how [`func() == func`](https://veerasundar.com/blog/javascript-valueOf) becomes true in JavaScript?)

Let's say that we have a simple JavaScript function `foo` that takes two parameters and prints out some information to the console. Notice that inside the function, we access the `this` object as well.

```javascript
// define a global variable `name`
window.name = "Global";
function foo(param1, param2) {
  console.log("Hello world", this.name, param1, param2);
}
```

## 1. Call a function using `()`

```javascript
foo(1, 2); // Hello world Global 1 2
```

This is straight forward - call a function by its name followed by two parenthesis`()` with the arguments passed. Notice that when you call a function this way, the reference `this` inside the function, points to the global/window scope. Hence, `this.name` prints `Global` on the console.

## 2. Call a function using `call`

Now what if you want to change the context while calling a function, so that instead of `this` referring to the global context, it can refer to anything that you wish.

```javascript
foo.call({ name: "called" }, 1, 2); // Hello world called 1 2
```

Using `call` method, you can pass in the custom context as the first parameter. Now, `this` will refer to this first parameter inside the called function. So, `this.name` will become "called", instead of "Global". Following the first parameter, you can pass additional parameters one by one, as usual.

## 3. Call a function using `apply`

Now you learned how to change the context when calling a JavaScript function. But it becomes cumbersome to pass the parameters to `call` method one by one. What if you have an array of values that you want to pass to a function as individual parameters? You can do so with `apply` method.

```javascript
foo.apply({name: 'applied'}, [1,2]); // Hello world applied 1 2
```

`apply` takes the second parameter to pass it down to the called function one by one as you would have done when calling a function directly. Sweet!

But why would we want to do that? Well, here's a real word use case.

Let's say you have an array of numbers, and you want to find the minimum of these numbers. You know that JavaScript has a built-in function  `Math.min` that returns the minimum of given arguments - but it accepts arguments as separate parameters, not as an array. With what we learned, we can reuse the `min` method as below.

```javascript
const numbers = [8, 7, 9, 1, 4];
const minimum = Math.min.apply(Math, numbers); // 1
```

Handy, isn't it?

How to call a JavaScript function


At my home system, I run a simple stock market analysis everyday, using a node app. I download the [end of day market data](http://www.eoddata.com/download.aspx), put it into the local postgres, and then calculate stats and indicators on every stock symbol. I track only the NYSE and NASDAQ exchanges which comes close to 6100 symbols.

The problem is the **processing time**.

While 6100 may seem a small number, it takes around **30 to 45 minutes** to calculate the indicators (_sma20, sma50, sma200, stochastic, bollinger bands and MACD_) on all the symbols and then update the results to database. It takes long time because the calculation is heavily CPU/IO bound and my laptop could only haul so much at given time. :)

Earlier, I used a simple `for` loop to go through all the symbols sequentially.

```javascript
// sequential processing of symbols
const numOfSymbols = symbols.length; // 6100
for (let i=0; i < numOfSymbols; i++) {
    const sma20 = calculateSMA(symbols[i], 20);
    // other indicators sma50, sma200, stochastic, macd and bollinger band
    uploadToDatabase(sma20);
}
// takes around 45 minutes to finish  🐢 😢
```

But,it can be better. Each symbol's indicators can be calculated independent of each other, so I could use some form of parallelism to speed up the processing time. Enter `child_process.fork()` method.

## fork()

[fork](https://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options) takes in a module path and spawns a new Node.js process that runs the given module code, in parallel to the parent / other forked processes.

So I extracted the indicator calculation code into `daily-indicators.js` file and then forked this module for a set of symbols. I just had to implement a communication logic to determine if I had processed all the symbols and then clean up the forked process.

```javascript
// parent.js
const runIndicators = () =>
  new Promise(async resolve => {
    const allSymbols = await db.getAllSymbols();
    const totalSymbols = allSymbols.length;
    const chunks = [];
    while (allSymbols.length) {
      chunks.push(allSymbols.splice(0, 1000));
    }
    let chunksDone = 0;
    for (let i = 0; i < chunks.length; i++) {
      const chunkProcessor = fork(path.join(__dirname, "daily-indicators.js"));
      chunkProcessor.on("message", msg => {
        if (msg.status === "done") {
          chunksDone += 1;
          chunkProcessor.kill();
          if (chunksDone >= chunks.length) {
            resolve();
          }
        }
      });
      chunkProcessor.send({ symbols: chunks[i] });
    }
  });
  await runIndicators();

  // --------------------------- //

  // daily-indicators.js
  process.on("message", async msg => {
    const { symbols } = msg;
    for (let i = 0; i < symbols.length; i++) {
      await calculateIndicators(symbols[i]);
    }
    process.send({ status: "done" });
  });
```

With this improved implementation, the whole process takes less than 10 minutes to finish! 🚀
```


Using Node fork() to speed up processing time


Remember [Gauge Generator](https://veerasundar.com/gauge-generator/) app? I initially [wrote it](https://veerasundar.com/blog/building-a-radial-gauge-with-svg-and-react-part-2/) using React classes and then [optimized it's performance](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/) using React PureComponent.

Now let's see how it can be rewritten using the talk-of-the-react-town - [Hooks](https://reactjs.org/docs/hooks-intro.html).

## What the hook?

![Use React Hook](https://i.imgur.com/NXf394H.png)

Put it simply, **Hooks** lets you to use state and other react features in your function components. For example, if you need state, you can use [useState](https://reactjs.org/docs/hooks-state.html) hook. And, if you need context, you can use [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext).

Apart from the [built-in hooks](https://reactjs.org/docs/hooks-reference.html), you can create your own custom hooks and share the functionality across your React components (remember mixins, but a LOT better than that).

You can get an [overview of React hooks](https://reactjs.org/docs/hooks-intro.html) or if you are really interested, do a [deep dive](https://overreacted.io/a-complete-guide-to-useeffect/) in Dan's blog.

Let's get on to our business - convert a React class component that uses State to a function component using Hooks.

## React class component with State

The component that I am going to use is the [`InputColor`](https://github.com/vraa/gauge-generator/blob/master/src/components/input-color.js) of [Gauge Generator app](https://veerasundar.com/gauge-generator/). This component wraps the `SketchPicker` color picker tool and let the user to select a color from the pop-up. It has one state variable - `pickerOpen` to indicate if the pop-up is opened or not.

For brevity, I omitted some code of this class.

```javascript
import React, { PureComponent } from "react"

class InputColor extends PureComponent {
  state = {
    pickerOpen: false
  }

  togglePicker = () => {
    this.setState(state => ({ pickerOpen: !state.pickerOpen }));
  }

  render() {
    const { pickerOpen } = this.state;
    return (
      <div>
        Picker State: {pickerOpen ? "Open" : "Closed"}
        <button onClick={this.togglePicker}>Toggle</button>
      </div>
    );
  }
}
```

Here we have a simple React component, written as a Class and holds a State variable. To convert this into a functional component with hooks, lets determine the state we need to track. In our case, we need to track a single `pickerOpen` boolean value in state. We can use `useState` hook for this purpose.

## useState hook

`useState` function takes in an initial value of the state and returns two values: `[currentStateValue, callbackToSetStateValue]`

So, in our case, we can convert the state and its modified method as below:

### Refactoring state

```javascript
/* Before refactor */
state = {
  pickerOpen: false
}

togglePicker = () => {
  this.setState(state => ({ pickerOpen: !state.pickerOpen }));
}

/* After refactor using useState hook */
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
```

If you notice, we got rid of using `this` in the refactor. Because, in functional component, you don't need to use `this` and all the functions / variables are wrapped in closures, so you can directly access them.

With this change, now whenever you update the state value using `setPickerOpen` callback, React will re-render your whole component again.

Now that we have our state built, it's time to use it in our render logic.

### Refactoring render
```javascript
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
return (
  <div>
    Picker State: {pickerOpen ? "Open" : "Closed"}
    <button onClick={handlePickerButtonClick}>Toggle</button>
  </div>
);
```

## Putting it all together

We have our state and render function, lets wrap it in a functional React component:

```javascript
const InputColor = () => {
  const [pickerOpen, setPickerOpen] = useState(false);
  const handlePickerButtonClick = e => {
    setPickerOpen(!pickerOpen);
  }
  return (
    <div>
      Picker State: {pickerOpen ? "Open" : "Closed"}
      <button onClick={handlePickerButtonClick}>Toggle</button>
    </div>
  );
}
```

No more classes! yay!!

## Hey, what about the performance?

React will re-render your function component when ever there's a change in the prop values. In Class component, we have `PureComponent` or `shouldComponentUpdate` to [help us with avoiding re-renders](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/). `PureComponent` will do a shallow comparision and using `shouldComponentUpdate`, you can write your own comparison logic.

But, How can we do the same in the function component? `React.memo`.

Just wrap your function component with `React.memo` and you will get the functionality of `PureComponent` in here.

For example,

```javascript
const InputColor = React.memo( ({value}) => {
  /* ... other logic ...*/
    return <p>{value}</p>
});
```

With this change, React will not re-render our `InputColor` component, if the passed in `value` did not change.

## Conclusion

In this post, I touched upon the very basic of React hooks - `useState`. In the coming articles, lets dive further and refactor our [Gauge Generator](https://veerasundar.com/gauge-generator/) app using some advanced hooks concept. Hang tight!


Rewriting a React Component using Hooks and React.Memo


Creating a Chrome extension in React is no different than creating one in vanilla JavaScript. After all, it's all JavaScript in the end. But we just need to keep few details in our mind. In this post, let's see how to create a simple Chrome extension with React.

## 1. Creating and setting up a React application

For this, we are going to use `create-react-app` tool, as it makes it easy to get started with React. In your command line, go to your workspace directory and run `npx create-react-app chrome-react-extension`. This will setup a sample React application named "chrome-react-extension", with all the build steps built in.

Once you have the basic react app created, run `yarn start` to make sure the application is working fine. If all good, you will see a browser page, loaded with the React app.

Now, let's move on to configuring this app to make this as an Chrome extension.

## 2. Configuring React app to work as a Chrome extension

A Chrome extension requires a `manifest.json` file to be present in root directory of the extension. Luckily, our `create-react-app` already has one. We just need to add few details in it to make it compatible with Chrome's `manifest.json` spec.

Open the file `[PROJECT_HOME]\public\manifest.json` and add the following code to it. The file should already contain other entries and that's fine, just add the code at the end of it.

```javascript
{
    /* ... other values */
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
    }
}
```

Also, the file will have some default entries for `icons`, but this is not compatible with the Chrome's `manifest.json` format. You can either update this to comply with ["icons" format](https://developer.chrome.com/apps/manifest/icons) or just remove the entry as we do not need it for our extension to work.

And, that's it. That's all you need to do to get out React app working as a Chrome extension. Build this app as you normally build a react app with `yarn build`. This generates the app and place the files inside `[PROJECT_HOME]\build`.

Now, let's install it in Chrome.

## 3. Adding React app extension to Chrome

In Chrome, go to `chrome://extensions` page and switch on *developer mode*. This enables the ability to locally install a Chrome extension.

![Chrome extension developer mode](https://i.imgur.com/MqJDzXz.png)

Now either click on the *LOAD UNPACKED* and browse to `[PROJECT_HOME]\build` or just drag and drop the `build` folder. This will install the React app as a Chrome extension.

![React app as Chrome extension](https://i.imgur.com/enqysM3.png)

Yay! We just installed our React app as a Chrome extension. When you click the extension icon (the auto generated one), you will see the React app, rendered as a extension popup.

![React app opened as Chrome extension](https://i.imgur.com/l4xV1xZ.png)

## 4. Making changes and debugging the extension

You can continue to make changes to your React app and do a build. To refresh the changes in your browser, just click on the `Reload` button on your extension's tile in `chrome://extensions` page. This will automatically pull changes from your build folder and re-install the extension.

![Reload chrome extension changes](https://i.imgur.com/OwIK98U.png)

And, to [debug the extension in browser](https://developer.chrome.com/apps/tut_debugging), you can either right click the extension icon and select *Inspect popup* or once the popup is opened, right click in it and select *Inspect*. This wll open the developer console, where you can inspect console logs, network traffic, local storage, etc.

## 5. Injecting a React app to page as content script from Chrome extension

So far we used React to render the extension popup. For some extensions, you may also need to render some UI to any underlying page. Chrome extension uses `content_scripts` for this. Using `content_scripts`, you can mention a JS and CSS file in `manifest.json`, that needs to be *injected*` into the underlying page. Then this script will have access to the page DOM and can do the normal DOM manipulation.

But the problem with our `create-react-setup` is that the build step will generate the output JS file in different name each time (if the content changed). So we have no way to know the actual file name of the JS file, hence we can't mention in it in our `manifest.json` file.

To workaround this problem, you can always add a static JS file under the `public` folder and when built, this JS fill will be part of the `build` folder. Then you can use this file name as your `content_script` entry point. But then, this file will not be part of React / Webpack build pipeline so you either have to setup your own build or settle for a vanilla JS in here.

As another workaround, you can just eject out of `create-react-app` and modify the webpack configuration by hand to either retain the generated file name or create a separate entry point for content script.

Let's do this.

## 6. Ejecting create-react-app and configuring content scripts

First run `yarn run eject` on the command line. This will eject `create-react-app` and then will create all necessary build scripts inside your project folder. Once ejection is done, go to `[PROJECT_HOME]\config\webpack.config.prod.js` file and make the following changes in it:

Change the option `entry` to have multiple entry points. Here, our content script will be named as `content.js`.
```javascript
entry: {
    app: [require.resolve('./polyfills'), paths.appIndexJs],
    content: [require.resolve('./polyfills'), './src/content.js']
},
```

Also, Search for `.[contenthash:8]` and remove it from both CSS and JS output file name. This will ensure the generated file will not have a random hash in it, thus we can mention the file name in our manifest JSON.

Once you made the above changes in the `webpack.config.prod.js` file, now its time to create the content script file. Create a file named `content.js` and `content.css` inside the `src` folder.

```javascript
/* src/content.js */
import React from 'react';
import ReactDOM from 'react-dom';
import "./content.css";

class ContentReact extends React.Component {
    render() {
        return (
            <div className={'react-extension'}>
                <p>Hello From React Extension!</p>
            </div>
        )
    }
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<ContentReact />, app);
```

```css
/* src/content.css */
.react-extension {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    background: rgba(0,0,0,.4);
}

.react-extension p {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
```

Now that we have configured React build pipeline and created our content scripts, lets update `manifest.json` to pick up these files. Add the following code to `manifest.json` file.

```json
"content_scripts" : [
    {
      "matches": ["https://reactjs.org/*"],
      "css": ["/static/css/content.css"],
      "js": ["/static/js/content.js"]
    }
  ]
```

Note that how we refer the JS and CSS file. Also, with `matches` option, we are injecting this content script only to the React JS website. But you can inject any website you want, just by adjusting the matching pattern.

Now build your app, go to `chrome://extensions` and reload the extension. After this, when you go to https://reactjs.org website you should see our extension injected model there.

![Content Script injected as a React App](https://i.imgur.com/Y7Dsawh.png)

This brings the end of this article. Feel free to let me know if there are questions.

How to create a Chrome extension in React JS


I am using Oh My Zsh in my [multi terminal setup in Windows](https://veerasundar.com/blog/how-to-split-the-terminal-into-multiple-views-in-windows-10/). I recently updated the Oh My Zsh and it immediately started throwing error 'parse error near elif'. I had enabled the `git` plugin for Oh My Zsh and it was not working because of this error.

It turns out that the (temporary) fix is very simple to solve this error:

Inside your Oh My Zsh terminal, run the following commands:

```shell
cd $ZSH
git config core.autocrlf false
git rm --cached -r .
git reset --hard
```

And restart your terminal. After that you should not see that error message again and everything should be back to normal.
```


Oh-My-Zsh: Fix for parse error near elif


Few years back, I wrote a small program in Java for the [Mars Rover](https://veerasundar.com/blog/mars-rover-in-java/) problem. Now that I am completely moved away from Java to JavaScript / React land, thought to rewrite that in JavaScript. So, here it goes:

## Mars Rover problem:

A squad of robotic rovers are to be landed by NASA on a plateau on Mars.

This plateau, which is curiously rectangular, must be navigated by the rovers so that their on-board cameras can get a complete view of the surrounding terrain to send back to Earth.

A rover's position and location is represented by a combination of x and y co-ordinates and a letter representing one of the four cardinal compass points. The plateau is divided up into a grid to simplify navigation. An example position might be 0, 0, N, which means the rover is in the bottom left corner and facing North.

In order to control a rover , NASA sends a simple string of letters. The possible letters are 'L', 'R' and 'M'. 'L' and 'R' makes the rover spin 90 degrees left or right respectively, without moving from its current spot. 'M' means move forward one grid point, and maintain the same heading.

Assume that the square directly North from (x, y) is (x, y 1).

### INPUT:

The first line of input is the upper-right coordinates of the plateau, the lower-left coordinates are assumed to be 0,0.

The rest of the input is information pertaining to the rovers that have been deployed. Each rover has two lines of input. The first line gives the rover's position, and the second line is a series of instructions telling the rover how to explore the plateau.

The position is made up of two integers and a letter separated by spaces, corresponding to the x and y co-ordinates and the rover's orientation.

Each rover will be finished sequentially, which means that the second rover won't start to move until the first one has finished moving.

### OUTPUT:

The output for each rover should be its final co-ordinates and heading.

INPUT AND OUTPUT

Test Input:

5 5  
1 2 N  
LMLMLMLMM

Expected Output:
1 3 N

## Mars Rover implemented in JavaScript / React

Source: [https://github.com/vraa/marsrover](https://github.com/vraa/marsrover)


Mars Rover in JavaScript, React


So, I built a [React app](https://github.com/vraa/gitflowanimated) to visualize and animate the Gitflow. Basically, in Gitflow,

1. There's a `master` branch.
2. You create a `develop` branch off of `master`. This `develop` branch is your bread and butter as most of your changes go in here.
3. `feature` and `release` branches are created off of `develop`.
4. Once you are done with `feature`, you merge it to `develop`.
5. Once you are done with `release`, you merge it to both `develop` and `master`. And you tag the release.
6. If there's a issue in production, you create a `hotfix` branch off of `master`.
7. Once `hotfix` is done, you merge it back to `master` and `develop` and tag the release.

## Animate the Gitflow

Source: [https://github.com/vraa/gitflowanimated](https://github.com/vraa/gitflowanimated)

Click on the buttons below / next to each branch to simulate the action and see the commits flowing.

<iframe style={{width:800}} className={"gitflow"} src="https://veerasundar.com/gitflowanimated/"/>


Gitflow - Animated


About 7 years ago I wrote about [my Git Workflow](https://veerasundar.com/blog/git-tutorial-my-git-work-flow/). I just happened to read that article now and realised "Hey, that's not how I use Git anymore!?". Of course, when I wrote that post, I was just getting started with Git. But now, the post is so outdated that only the "90s kids remember it anymore"! 🤣

Anyway, Long story short: I decided write again about my Git workflow.

Let's start:

## 1. Cloning / Creating a Git repo

```text
$ git clone git@github.com:vraa/blog.git
$ cd blog
```

![Cloning a git repo](https://i.imgur.com/9VKXisd.png)

The first step is to get a local Git repo going. If I am starting a new project myself, I just needed to do `git init` on my project directory. But at work, it is usually cloning my team's existing repo.

## 2. Making changes and branching

```text
$ git checkout -b vraa-master-feature origin/master
```

![Creating branches in Git](https://i.imgur.com/OsCa0dA.png)

Before I start working on my local repo, I always create a separate branch for my work. Branches are cheap in Git. So, I create as many branches as I need.

I follow this naming convention: `[my-short-name]-[parent-branch-name]-[bug/feature-id]`. This convention helps me in quickly identifying / distinguishing my branch or my pull request from the sea of pull requests.

## 3. Pulling in changes

```shell
$ git pull --rebase
```

![Git rebase](https://i.imgur.com/ZMcnyQ1.png)

Often, even before my changes are committed / pushed, the remote repository is always getting updated with other changes.  So, it is vital to bring in those changes as soon as possible, to avoid creating merge conflicts later.

> Note: if my local changes are not yet pushed, then I tend to use `rebase` option instead of a merge. This helps me to keep my branch history clean. But, use it with caution if you have pushed your branch to a remote repo, as `rebase` rewrites commit history, you will end up with a nightmarish merge conflicts.

## 4. Stashing my local changes

```shell
$ git stash
$ git pull
$ git stash pop
```

![Stashing changes in Git](https://i.imgur.com/pjdoOyu.png)

Sometimes, when I try to pull remote changes and it overwrite my local changes, git won't let me to pull. If I am in middle of the work and not yet ready to commit the changes, I stash my local changes, so that I can safely pull in the remote changes.

After applying the stashed files, if there are any merge conflicts, then I will have to deal with it.

## 5. Reordering and squashing my commits

```text
$ git rebase -i 8e35004e04f352b20eda0eb0a4d46574d8fba216
// re order and combine multiple commits into single one
```

![Squashing multiple commits](https://i.imgur.com/CQYWReL.png)

During development, I usually commit as many times as possible. This helps me to go back in history if something breaks. But this also introduces lots of mid work / partial commits. I usually clean my working history by squashing multiple commits into a single commit.

Be aware that this rewrites history. So, never do this if you have already pushed your changes to remote and other people have got your changes.

## 6. Pushing my changes

```text
$ git push origin
```

![Push changes](https://i.imgur.com/TaCjP4Z.png)

And finally it's time to deliver my changes and break the build.. wait.. no... just deliver the changes. Once my changes are delivered and merged, I usually remove the branch locally and remotely. This helps to keep the branch count at check.
```


My Git Workflow


This post is almost due for one year! Well, better late than never!! :)

In my last post, I explained how you can [build a radial gauge with SVG and React](https://veerasundar.com/blog/building-a-radial-gauge-with-svg-and-react-part-1/). In this post, I will continue to introudce two tools that will help you to build the visual gauge.

## Online Gauge Generator

[![Online Gauge Generator](https://i.imgur.com/bzzfkX9.gif)](https://veerasundar.com/gauge-generator/)

I built an online free tool that you can use to [generate radial gauges](https://veerasundar.com/gauge-generator/). You can customize each and every part of the gauge to your need. Once you are happy with your creation, you can export the generated gauge to a SVG or PNG image files.

## react-radial-gauge NPM module

If you are React developer, then you can make use of the [react-radial-gauge](https://www.npmjs.com/package/react-radial-gauge) npm module in your react application. This module exports a React component to generate radial gauges in your application. You can use the tool as below:

Install the module `npm install react-radial-gauge` and then,

```javascript
import Gauge from 'react-radial-gauge';

class AwesomeComponent extends React.Component {
    render() {
        let opts = {/* Gauge customization */}
        return (
            <Gauge {...opts} />
        )
    }
}
```

Here You can find the [source code and documentation of react-radial-gauge](https://github.com/vraa/react-radial-gauge).
```


Building a radial gauge with SVG and React - Part 2


While building the [Trader App](https://veerasundar.com/trader), I used SVG in React to build the radial gauge UI widget that displays the profit percentage in a visually appealing manner. The final product looks something like below (you can view the actual widget at [https://veerasundar.com/trader](https://veerasundar.com/trader))

## Final output

As you can see, the gauge has several components.

1. Base dial with point markers.
2. A needle, anchored at center that points the progress.
3. A progress bar, either in red or green dependening on the progress value is in negative or positive.

For simplicity, let's assume the gauge has a width and height of _120px_. With this, let's start building the components one by one.

## SVG Gauge - CSS

We will be using below CSS to style our SVG gauge. Also note that we have rotated the SVG gauge by negative 90 degree using `transform: rotate(-90deg)`, as it is needed to properly position the Gauge.

```css
.radial-gauge {
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
	margin: 20px 0;
}
.radial-progress {
    transform: rotate(-90deg);
    font-family: Verdana, Sans-Serif;
    margin: 0 20px;
}

.radial-progress .tick {
    stroke: #4b5156;
}

.radial-progress .tick.quarterTick {
    stroke: #2b2f32;
    stroke-width: 2;
    opacity: 1;
}

.radial-progress .tick-labels {
    font-size: .6rem;
    fill: #5b6268;
}

.radial-track {
    stroke: #33373b;
    stroke-width: 12;
}

.radial-progress-bar {
    stroke-width: 12;
}

.radial-progress-bar.up {
    stroke: #43A047;
}

.radial-progress-bar.down {
    stroke: #e53935;
}

.needle .point,
.needle .center {
    fill: #2b2f32;
}

```

## SVG Gauge - Base dial

As a first step, we will be building the base dial and the tick markers / labels for our SVG gauge. The output can be seen below.

### Code for the base dial
```html
<svg class="radial-progress" width="120" height="120" viewBox="0 0 120 120">
    <defs>
        <line id="tick" x1="104" y1="60" x2="110" y2="60" stroke-linecap="round"></line>
    </defs>
    <g id="ticks">
        <use class="tick quarterTick" href="#tick" transform="rotate(0 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(10 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(20 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(30 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(40 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(50 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(60 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(70 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(80 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(90 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(100 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(110 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(120 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(130 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(140 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(150 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(160 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(170 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(180 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(190 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(200 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(210 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(220 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(230 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(240 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(250 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(260 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(270 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(280 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(290 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(300 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(310 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(320 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(330 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(340 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(350 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(360 60 60)"></use>
    </g>
    <g id="tickLabels" class="tick-labels">
        <text x="85" y="65" text-anchor="middle" transform="rotate(90 90,65)">0</text>
        <text x="45" y="33" text-anchor="middle" transform="rotate(90 53,35)">50</text>
        <text x="15" y="65" text-anchor="middle" transform="rotate(90 20,65)">100</text>
        <text x="50" y="93" text-anchor="middle" transform="rotate(90 53,95)">50</text>
    </g>
    <circle class="radial-track" cx="60" cy="60" r="54" fill="none"></circle>
</svg>
```

As you can see, we have,

1. Defined a `SVG` element with width and height as 120px. We have also set the `viewBox` as `0 0 120 120` so that our SVG elements are scaled correctly (more about [viewBox](https://www.sarasoueidan.com/blog/svg-coordinate-systems/)).
2. We defined a `#tick` element inside `<defs>` and reused it multiple times, rotating them using `transform=rotate()` according to their corresponding position in the dial. We also placed the labels of ticks using `<text>` and rotated them accordingly as we did for the tick markers.
3. Finally, we drew the base dial using the `<circle>` element.

## SVG Gauge - Progress Bar

Next part would be to add the progress bar, indicating how much profit one have made (both positive / negative).

For example, in above gauges, the first gauge has made a negative -15% profit and the second one made a postive 59% profit. In order to visualize this, we will be using `stroke-dasharray` and `stroke-dashoffset` properties of `circle` element.

### Code for drawing progress
```html

<circle
	class="radial-progress-bar down"
	cx="60"
	cy="60"
	r="54"
	fill="none"
	stroke-dasharray="339.292"
	stroke-dashoffset="364.73889999999994" />

```

You can see I have used the values `stroke-dasharray="339.292"` and `stroke-dashoffset="364.73889999999994"`. To calculate the values, I used the following formuales.

```javascript
	let radius = 54; // radius of our circle
	let progress = 15; // 0-100 range

	strokeDasharray = 2 * Math.PI * radius;
	strokeDashOffset = strokeDashArray * (1 - (progress/200));

```

As you can see the `stroke-dasharray` is nothing but the circumference of the circle and `stroke-dashoffet` is how much gap should be between each strokes. We use this gap to show the progress.

In my case, I needed half the circle to show positive progress and the other half to show negative progress, I divided the progress value by 200 to map it correctly.

## SVG Gauge - Pointer Needles

Next we will be adding the pointer needles to exatly show the progress value inside the gauge (hey, what's a gauge if it doesn't have a needle!?).

### Code to construct the needle
```html
<g id="needle" class="needle">
    <polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)"/>
    <circle class="center" cx="60" cy="60" r="23"></circle>
</g>
```

The needle has two components;

1. The pointer is drawn using `polygon` and it's placed the center of the gauge cirle.
2. And a center cirlce, acting like a base of the needle.

We just need to calculate the rotation angle of our needle and rotate it using center of our SVG as origin (which is 60,60).

```javascript
let progress = 15; // 0-100 range.
let needleAngle = (180 * progress) / 100;

/* transform = rotate(needleAngle centerX centerY) */
```

Note: I am using 180 below because I need to map the progress to only half the circle angle. If I wanted to map it to full circle, I would have used 360 here.

If you want to show your needle moving from 0 to the progress position, you can use `animateTransform`.

```html
<polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)">
	<animateTransform
		attributeName="transform" type="rotate" from="0 60 60" to="106.2 60 60" dur=".5s"
                              fill="freeze"></animateTransform>
</polygon>
```

## SVG Gauge - Assembly

Putting it all together, we will end up with our assembled SVG gauge.

### Full code

```html
<svg class="radial-progress" width="120" height="120" viewBox="0 0 120 120">
    <defs>
        <line id="tick" x1="104" y1="60" x2="110" y2="60" stroke-linecap="round"></line>
        <radialGradient id="radialCenter" cx="50%" cy="50%" r="50%">
            <stop stop-color="#dc3a79" offset="0"></stop>
            <stop stop-color="#241d3b" offset="1"></stop>
        </radialGradient>
    </defs>
    <g id="ticks">
        <use class="tick quarterTick" href="#tick" transform="rotate(0 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(10 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(20 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(30 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(40 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(50 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(60 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(70 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(80 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(90 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(100 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(110 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(120 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(130 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(140 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(150 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(160 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(170 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(180 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(190 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(200 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(210 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(220 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(230 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(240 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(250 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(260 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(270 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(280 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(290 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(300 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(310 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(320 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(330 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(340 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(350 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(360 60 60)"></use>
    </g>
    <g id="tickLabels" class="tick-labels">
        <text x="85" y="65" text-anchor="middle" transform="rotate(90 90,65)">0</text>
        <text x="45" y="33" text-anchor="middle" transform="rotate(90 53,35)">50</text>
        <text x="15" y="65" text-anchor="middle" transform="rotate(90 20,65)">100</text>
        <text x="50" y="93" text-anchor="middle" transform="rotate(90 53,95)">50</text>
    </g>
    <circle class="radial-track" cx="60" cy="60" r="54" fill="none"></circle>
    <circle class="radial-progress-bar up" cx="60" cy="60" r="54" fill="none" stroke-dasharray="339.292"
            stroke-dashoffset="239.20086"></circle>
    <g id="needle" class="needle">
        <polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)">
            <animateTransform attributeName="transform" type="rotate" from="0 60 60" to="106.2 60 60" dur=".5s"
                              fill="freeze"></animateTransform>
        </polygon>
        <circle class="center" cx="60" cy="60" r="23"></circle>
    </g>
</svg>
```

## SVG Gauge in production

Here's the screenshot from [Trader app](https://veerasundar.com/trader/) where this gauge is used.

[![SVG Gauge](https://camo.githubusercontent.com/c92d3d9cd31ff7ec7f25d052567d14f12e1a097c/68747470733a2f2f766565726173756e6461722e636f6d2f7472616465722e706e67)](https://veerasundar.com/trader/)

In the next post, I will show how to build this SVG Gauge in React component.
```


Building a radial gauge with SVG and React - Part 1


I hope I don't need to introduce you to [Webpack](https://webpack.github.io/). By this time, you would have read through the [webpack documentation](http://webpack.github.io/docs/) and figured out that the page is for the NASA people. However, I would like to start with this Gem:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">1. have an exciting app idea<br/>2. create project folder<br/>3. include WebPack<br/><br/>…<br/><br/>47. lose all passion for project and give up<br/><br/>GOTO 1</p>&mdash; I Am Devloper (@iamdevloper) <a href="https://twitter.com/iamdevloper/status/702464176954875904">February 24, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

So, here's a very, very basic setup of Webpack to help you get started. I will keep this article as simple as I can. Also I assume that you know the basics of NPM and have installed Node in your machine.

## 0. Our Goal

We are going to create a simple setup that will have the following structure:

```text
app
|--src
|   |--js
|   |   `--main.js
|   `--scss
|       `--main.scss
|--resources
|   `--js
|       `--bundle.js
|--package.json
`--index.html
```

Go ahead and create those files in your favorite editor (except the *bundle.js*). We will have the webpack to:

1. bundle our JavaScript files from *src* folder and generate the output to *resources/js/bundle.js* file.
2. Compile *.scss* file to *.css* file and bundle it with our JS file.
3. Have a auto reloading mechanism that auto refresh the browser as you make changes to your JavaScript / Sass files.

## 1. Installing Webpack and bundling JavaScript

First, lets add some test code to the *src\js\main.js* file.

```javascript
console.log('Hello Webpack');
```

You need to run `npm install webpack -g` (to have the webpack command available globally). Also, it is better to install it as a dev dependency too. So run `npm install webpack --save-dev`.

Now that you have webpack installed, it's time to tell it what to do. We do this via a configuration file. Create a file called *webpack.config.js* in the root folder and add the following content in it.

```javascript
/* webpack.config.js */
module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    }
}
```

The configuration tells webpack:

1. What is our starting point: **entry**
2. Where to generate the bundled file: **output.path / output.filename**
3. What's the path that browsers will ues to load the bundled file: **output.publicPath**. This is important to have the auto reload work properly when we use _webpack-dev-server_.

Now if you run `webpack` in your command line, you will see that the JavaScript file is getting bundled and the output is generated in *resources/js/bundle.js* file.

## 2. Compiling SASS files

Let's setup SASS compilation. In your *src\sass\main.scss* add some test SASS code.

```sass
body {
    background-color: #f00;
}
```

To enable SASS compilation, we need to install loaders which will be used by webpack. Run `npm install style-loader css-loader sass-loader --save-dev`.

Next, you need to update *webpack.config.js* file, instructing webpack to use the loaders. The final content of webpack configuration will be:

```javascript
module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
}
```

Take a look at the `module.loaders` configuration. We are adding a new loader that *tests* for the *.scss* extension and for the matching files, uses a **series of transformation** (from right to left) sass -> css -> style.

Now update *src\js\main.js* to include the SASS file.

```javascript
require('../scss/main.scss');
console.log('Hello Webpack');
```

Now if you run `webpack`, you will see that the SASS file is converted and bundled together with our JS files into *resources/js/bundle.js*.

## 3. Serving and Auto reloading changes.

We need a web server that serves our file. Webpack provides one. Install it with `npm install webpack-dev-server -g` (to have the command available globally) and `npm install webpack-dev-server --save-dev` to define a dev dependency in your *package.json*.

Add below content to the *index.html* file to load our bundled file (omitting boilerplate code for brevity)

```html
<html>
    <body>
        <h1>Hello World</h1>
        <script type="text/javascript" src="resources/js/bundle.js"></script>
    </body>
</html>
```

Now run `webpackdev-server --inline`. The parameter `--inline` instruct the webpack server to auto reload changes. Without it, it will just serve the files.

Now open this url in a browser: [http://localhost:8080/](http://localhost:8080/) and you will see the text **Hello World** in a red color background. Now update any of the *main.scss* or *main.js* and you will see the changes are reflected immediately.

Happy Webpacking!
```


Getting started with basic webpack setup


In my previous post, I showed you a simple [example of ES6 Iterator and Generator](https://veerasundar.com/blog/es6-iterator-generator-example/). In that example, I used simple JavaScript constructor functions to illustrate Iterator and Generator concepts, because I did not want to confuse the readers with ES6 classes. Let's fix that in this post.

## Rewrite `Basket` class in ES6.

```javascript
'use strict';

class Basket {

	constructor() {
		this.container = [];
	}

	*[Symbol.iterator]() {
		for (let index = 0; index < this.container.length; index++) {
			yield this.container[index];
		}
	}

	add(item) {
		if (item) {
			this.container.push(item);
		}
	}
}

function test() {

	let fruitBasket, i, fruit;

	fruitBasket = new Basket();
	fruitBasket.add('apple');
	fruitBasket.add('banana');
	fruitBasket.add('orange');


	for (fruit of fruitBasket) {
		console.log('Fruit fetched is: ', fruit);
	}

};

test();
```

Now that we have a complte ES6 classes with Iterator/Generator in it, lets optimize our Iterator method a little bit.

## Reusing Array's Iterator

If you notice, the `Basket` class uses an Array type `container` to hold the items. As Array type has a built-in Iterator, we can use that Iterator instead of writing our own in our classes ([thanks to this tip](https://www.reddit.com/r/javascript/comments/3p3o4z/es6_iterator_generator_example/cw32o60)). With this, we can rewrite our Iterator method like this:

```javascript
[Symbol.iterator]() {
	return this.container[Symbol.iterator]();
}
```

Notice that our Iterator is no longer a generator function (lack of `*` syntax), because it need not be.
```


Learn how to write ES6 code that uses Iterator and Generator with a simple example.

Rewriting Iterator, Generator example in ES6


ES6 comes with lots of [new _cool_ features](https://github.com/lukehoban/es6features). Out of which, **Iterators** and **Generators** took some time to get used to. Here's an example that shows how to use ES6 Iterators and Generators.

Since this is experimental stuff, you need latest version of Chrome/Firefox to run the code. I used [Chrome's Dev tool snippets](https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets) to author/run the given example code.

Let's start with the problem definition.

Assume that you have a business class `Basket` that used to hold a list of items and other related methods. Now you need a way to iterate through all the items inside the `Basket`. Since `Basket` is a custom class, you can not use JavaScript's `for..in`. You need to write your own custom logic that iterates, as shown below.

## Iterating `Basket` using `for` loop

```javascript
'use strict';

function Basket() {
	// array to hold things inside the basket
	this.container = [];
}

// business method add that puts the given item in the basket
Basket.prototype.add = function(item) {
	if (!!item) {
		this.container.push(item);
	}
}

function test() {

	// create new instance of Basket.
	var fruitBasket = new Basket();

	// put fruits in the fruitBasket
	fruitBasket.add('apple');
	fruitBasket.add('banana');
	fruitBasket.add('orange');

	// list all fruits in the fruitBasket
	for(let index=0; index < fruitBasket.container.length; index++){
	    console.log(fruitBasket.container[index]);
	}

};

test();
```

### Problems with `for` loop approach

1. The `for` loop inside the `test` method is accessing a property `container` which is supposed to be internal to the `fruitBasket` object. There is no need for the outer world to know the internal of an object to iterate it. Of course, there are other ways to fix it, but for this article's purpose, lets not go there.
2. You can't use `for(let fruit in fruitBasket)` to iterate through the items. Because, althogh semantically `fruitBasket` is a list, technically it is not a list or an array. So, you can't use the elegant way of `for..each`. So sad!

Let's fix this with the use of Iterators.

## Enter `Iterator`

Given the above problem, we need a way to tell JavaScript that our custom object is indeed a `list` and let it use `for..each` in our object. How do we do it? With the help of `Iterator`, of course. We need to define a method in our object that JavaScript will invoke when it wants to iterate our object. And, what method will that be?

If you are coming from Java background, you must be aware of `Interface`. If an object tends to implement an interface, then the Java run time knows for sure that the object will have an implementation of all methods defined in that interface. So, without fear, it will invoke that method.

But, JavaScript is not Java and we don't have Interfaces here. What else we have? **ES6**.

ES6 defines two new protocols `iterator` and `iterable`, which in layman terms means that, you can define custom iterator methods in your object and tell JavaScript that that's our iterator method.

For example, you can say,
```javascript
var myObj = {};
myObj[Symbol.iterator] = function () {
	return {
		next: function() {
			return {
				value: 'anything',
				done: false // or true if completed iterating
			}
		}
	}
}
```

and you can use,
```javascript
for(let thing of myObj) { console.log(thing); }
```

All you need to do is from your custom iterator function, return an object that has a method `next()` defined which inturn will return an object in the format of `{value: 'val', done: false}` . JavaScript will use the *well-known* `Symbol.iterator` to identify if an object is iterable and has an iterator function defined in it. ([More about Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator))

How sweet! Let's use this concept in our `Basket` problem.
```javascript
'use strict';

function Basket() {
	this.container = [];

	// maintain the state of current index value while iterating
	this._index = 0;
}

Basket.prototype.add = function(item) {
	if (!!item) {
		this.container.push(item);
	}
}

// define custom iterator
Basket.prototype[Symbol.iterator] = function() {
	return {
		next: function() {
			var result;
			if (this._index < this.container.length) {
				result = {
					value: this.container[this._index],
					done: false
				};
				this._index++;
			} else {
				// completed iterating through all items.
				result = {
					done: true
				}
				this._index = 0;
			}

			return result;
		}.bind(this)
	};
}

function test() {

	var fruitBasket;

	fruitBasket = new Basket();
	fruitBasket.add('apple');
	fruitBasket.add('banana');
	fruitBasket.add('orange');

	for (let fruit of fruitBasket) {
		console.log('fruit fetched through iterator is ', fruit);
	}

};

test();
```

Now our code has improved a bit. From our `fruitBasket`, we are not exposing the internals to the outer world to iterate. And we get to use `for..of` to iterate `fruitBasket`.

But still, there's a problem. If you look at the code inside our custom iterator, you will notice that we are maintaining the state manually using the variable `_index`. We manually update this value as we iterate through the list. Is there an alternative to this?

Yes and it's called as **Generator** functions.

## Enter `Generator`

By definition, A generator is a special type of function that works as a factory for iterators. In English, a generator in a function returns a `{value: 'val', done: false}` if there are items left and returns `{done:true}` if there are no items. And, it maintains internal state by its own.

A Generator function should have,

1. `function* ()` syntax
2. One or more `yield` expressions inside the function body. `yield` is a special keyword that will return a value in the form of `{value: 'val', done: false}`.  ([More about Yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield))

Let's put this together in our `Basket` problem.

```javascript


'use strict';

function Basket() {
	this.container = [];
}

Basket.prototype.add = function(item) {
	if (!!item) {
		this.container.push(item);
	}
}

Basket.prototype[Symbol.iterator] = function*() {
	for(let index=0; index < this.container.length; index++){
		yield this.container[index];
	}

}

function test() {

	var fruitBasket, i;

	fruitBasket = new Basket();
	fruitBasket.add('apple');
	fruitBasket.add('banana');
	fruitBasket.add('orange');


	for(let fruit of fruitBasket){
		console.log('fruit fetched through iterator/generator is', fruit);
	}

};

test();
```

Notice how simple our iterator method has become.

Hopefully, this article sheds some light on the ES6 Iterator / Generator concepts. Please leave your questions / feedback (if any) in the comment section.
```


ES6 - Iterator, Generator Example


Here's something I learned new today from a JavaScript tricky question posted by [@frantic](https://github.com/frantic/currying). Per the question, the code below must return **true** in both cases, and you need to implement the function that does so.

```javascript
console.log(func() == 42); // true
console.log(func == 42); // true
```

Which basically means that a function is equal to the value it returns. Been thinking a lot on how a function can be equal to a primitive value but couldn't come up with an answer. So, I gave up and looked into the spoiler code which had the solution.

Apparently, there's a method called [`valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) which you can use to define the primitive value equivalent of any JavaScript object. Since JavaScript functions are objects too, you can define a `valueOf()` method to a JavaScript function and return any value from it.

Here's the code that explains this.

```javascript

// define a function.
var answerToEverything = function(){
	return 42;
}

// define the valueOf method.
answerToEverything.valueOf = function() {
	return 42;
}

// test the equivalency by calling the function
console.log( answerToEverything() == 42); // true

// test the equivalency directly.
console.log( answerToEverything == 42); // true
```

And, of course, if you use `===` instead of `==`, `answerToEverything === 42` will return false, because `===` will match both value and type.

JavaScript, you never stop to amaze me with your little quirks!
```


func() == func


I recently built a [JavaScript game](https://veerasundar.com/suzhi) for which I needed a way to visually show the player's health. The game already had a HUD where the health information was displayed. But I wanted a better way to inform about the amount of health left and I chose to implement this like a meter widget.

Below is the final result (also you can see it in live in the [game](https://veerasundar.com/suzhi)):

[![Visualizing Player health](https://veerasundar.com/assets/img/lifeline.png)](http://jsfiddle.net/3ubs9mz6/3/)

This post explains how to convert the player health, which is in percentage to a circle to draw in HTML5 canvas.

##Drawing circles in Canvas:

Canvas offers a method `arc()` to draw circles. This method's signature is:

```javascript
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
```

In that, `startAngle` and `endAngle` is what we are interested in. By converting the health percentage to start and end angles, we can draw a arc that correlates with the percentage.

### Function to convert degrees to radians:

`startAngle` and `endAngle` accepts their values in *radians*. But I persoanlly feel one can easily understand *degrees* instead of *radians*. So, we need a function that converts *degrees* to *radians*.

```javascript
function rad(deg){
    return (Math.PI/180)*deg;
}
```

### Function to convert percentage to radians:

Now that we have our degree-to-radian converter in place, we can move to next step of converting percentage to radians.

```javascript
function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}
```

In the context of Canvas arc API, 0 degrees starts at circle's east end, 90 degrees is south, 180 degrees is west and 270 degrees is north. Since I wanted my arc/circle to begin at top/north, I am adding that to percentage calculation. If you want your arc to start at different end points, you can add respective degrees to the above formula.


### Combining all - drawing percenate as circle in canvas

```javascript
function rad(deg){
    return (Math.PI/180)*deg;
}

function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}


var ctx = document.getElementById('lifeline').getContext('2d');
function draw(x,y, percent){

    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.strokeStyle ='rgb(221,221,221)';
    ctx.arc(x,y, 45, rad(270), percentToRad(100), false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = 'rgba(255,65,54,.8)';
    ctx.arc(x, y, 45, rad(270), percentToRad(percent), false);
    ctx.stroke();


    ctx.beginPath();
    ctx.fillStyle = 'rgb(57,204,204)';
    ctx.arc(x,y, 40, 0, 2*Math.PI, false);
    ctx.fill();
}

draw(50,50, 0);
draw(200,50, 60);
draw(50,200, 44);
draw(200,200, 100);
```


Here's the [Fiddle](http://jsfiddle.net/3ubs9mz6/3/) where you can play around with the code and see the results for yourself and here's the [JavaScript game](https://veerasundar.com/suzhi) where this has been implemented.
```


HTML5 Canvas game - Visualizing player health


I hope some of you might remember the application [Twikural that I built](https://veerasundar.com/blog/open-sourcing-twikural-an-app-engine-project/) a while ago. I recently rebuilt the entire application from scratch using Play framework. This post explains why.

Back then, I was looking for a platform to quicky build and deploy a Java application. App Engine was easily the platform of choice because it was free to start and its Eclipse SDK was awesome. All you had to do is download the SDK, write your code following the set rules, click a button to deploy to cloud and viola! your application is up and running.

Apart from the easy to use tools, App Engine gave me additonal features such as Emailing and scheduling cron jobs, which I needed both for Twikural. Hence I built the [first version of Twikural](https://veerasundar.com/blog/twikural-how-it-works/) in App Engine.

The application stayed in that shape for a quite long time, untouched, undisturbed and sometimes forgotten :). However, I wasn't happy with [the code](https://github.com/vraa/twikural-old) I wrote for the first version of Twikural. It was crude, messy and in templates I used lot of scriptlets (guilty!). Also, with App Engine, I kinda felt that I was never in full control. So, I always had a item in my todo list to redo the application, but never had the time to sit and do it until now.

In past couple of years, I learnt to setup and run a Linux box on my own (I use Linode, btw). Also, while building [Feedmerang](http://feedmerang.com) I got a pretty good experience with [Play framework](https://www.playframework.com/).

So, there it is: A Linux machine, just sitting idle (most of the time) and pretty good Java web application framework waiting to be played! Finally decided to mix them both and the end result is, **Twikural is now running on my own machine** (ah! the feeling of happiness).

<a href="http://twikural.veerasundar.com">
  <img src="http://i.imgur.com/h54rKlR.png" title="Twikural" />
</a>

Working with Play framework is an awesome experience because of its 'Hit Refresh workflow'. You would never beleive that you are developing a Java web application, which tends to be slower because of constant redeployments. But with Play, you make changes, refresh the browser and your changes are there. As if you are writing a JavaScript application!

Now just the boosted productivity, the Play framework itself is enjoyable to work with - easy to learn folder structure, inetgration with CoffeeScript and LESS css and its stateless architecture. It has become my first framework of choice for my every projects.

So, enough with my ramblings. Here's the [source code](https://github.com/vraa/twikural) - it's completely open source. If you are interested in contributing to this project, just fork and send me a PR.


Rewriting Twikural from scratch in Play framework


Over the years, I have seen several JavaScript techniques that are particularly clever. Here's a short list of 5 such techniques that I have been using again and again. I hope it inspires you too to rethink how you write certain piece of code.

And, please note that some people may think clever coding impacts readability and they might be right. So, grasp the concept and apply it in your code wherever you think it helps.

## 1. A compact string comparision

Let's say you want to check if a string value is present in a set of strings. You obviously go for a `if` statement as below.

```javascript
if(fruit === 'apple' || fruit === 'banana' || fruit === 'chikoo'){
	doMagic();
}
```

Here's a compact version of above code:
```javascript
if({apple:1,banana:1,chikoo:1}[fruit]){
	doMagic();
}
```

This trick works well only if you have a small set of strings to compare.

## 2. !!

Here's a shortest way to convert any JavaScript value to its truthy / falsy representation - just use `!!val`. Very useful if you want to check if a value is a present or not.

For example,
```javascript
if(!!document.addEventListener){
	doMagic();
}
```

But `!!` might confuse people with `!` operator which has a different meaning. So make a good judgement before you use `!!` everywhere.

## 3. Conditional function call

If a value is true, you want to call a function foo() otherwise you want to call bar(). You go for `if`, right?

```javascript
if(param){
	foo();
}else{
	bar();
}
```

Here's an alternative, short approach:

```javascript
param ? foo() : bar();
```

yay!

## 4. Chaining of function calls

You have three functions `one()`, `two()` and `three()`. You want to call these functions one after other, but only when a previous function returns a truthy value. For example, if all three functions returns a truthy value, then all will be called. But if the function `two()` returns false/null then function `three()` won't be called.

So, you go for `if`, obviously.

```javascript
if(one()){
	if(two()){
		three();
	}
}
```

But let's rewrite with this one:

```javascript
one() && two() && three();
```

## 5. IIFE

**IIFE** is short for **Immediately Invoked Function Expression**. It means, you define a function and then you call it immediately. IIFE helped me in some usecases where I don't want to create a new function but I needed the logic to be inside a function block.

For example, lets say you are initializing variables and for one variable, the initial value needs to be calculated using some complex logic. If you don't want to separate this calculation logic to a seperate function, but you still want to wrap it in it's own block, you can IIFE. Like below:

```javascript
function doMagic(){
	var foo = 1,
		bar = 2,
		zoo = (function(){
			// some complex stuff
			// some more complex stuff
			return stuff;
		}()),
		baz = 3;
}
```

So, what do you think about these tricks? Do you think these are usefull or affect the code readability? Feel free to comment your thoughts.
```


5 nifty JavaScript tricks that you may not know


This blog is [built on Jekyll](https://veerasundar.com/blog/moving-from-wordpress-to-jekyll/) and served by Nginx. I chose Jekyll so that I could gain some performance boost from the static, pre-generated blog content rather than serving every blog request from a database. Nginx was the obvious choice because it's the efficient HTTP server out there.

However, every time I [check my pages in Pagespeed](https://developers.google.com/speed/pagespeed/insights/?url=veerasundar.com%2Fblog&tab=desktop), it complains that the static assets are not optimized and I should **Leverage browser caching**. This is because I missed to set Expires header in my Nginx configuration. Turns out it is very simple to do.

## Nginx configuration to set Expires header for images and static assets

Assuming you are using a Unix flavoured operating system (Ubuntu, in my case);

1. Go to `/etc/nginx/sites-available`.
2. Open your site configuration in an editor. For example, `vi veerasundar.com` (Use sudo if necessary).
3. In the server configuration, add the code to set Expires header if an request is made to a static file. Here's my complete configuration for this server.

```text
server {

        listen   80;
        server_name veerasundar.com;

        access_log /location/of/access.log;
        error_log /location/of/error.log;

        location / {

                        root   /location/of/www;
                        index  index.html index.htm;

                        if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") {
                                        expires 30d;
                                        access_log off;
                                        add_header Pragma public;
                                        add_header Cache-Control "public";
                                        break;
                                }

                        }

            }

```

After making the changes, save the file and restart nginx - `sudo /etc/init.d/nginx restart`.

Now your static files are served with **Expires** header and will be cached by the browser.


How to set Expires header for static assets in Nginx


Here's a little code snippet that I wrote recently to convert a namespaced string, value into an JavaScript object. i.e. if passed a value `("foo.bar.baz", 10)` the function will return an JavaScript object `{foo:{bar:{baz:10}}}`.

```javascript
// @input key = "foo.bar.baz", value = 10
// @output {foo:{bar:{baz:10}}}
function toHash(key, value){
    var parts = key.split('.').reverse(),
        i, foo = {}, bar = {};
    foo[parts.shift()] = value;
    bar = foo;
    for(i=0; i<parts.length; i++){
        bar = {};
        bar[parts[i]] = foo;
        foo = bar;
    }
    return bar;
}
```

Run this code in JSFiddle: [http://jsfiddle.net/z89jr0k3/](http://jsfiddle.net/z89jr0k3/)
```


Convert a namespaced string, value pair to an JavaScript object


In JavaScript, when you define an object, you can attach it's functions in two different ways.

1. Inside object's constructor function, using `this.func = function(){...}`
2. Using `prototype`. i.e. `Obj.prototype.func = function() {...}`.

In both approaches, the function `func()` will be accessible to all the instances of your object.

But which one is the best way to use?

In short: Use `prototype` - which is effective for _most_ cases. If your objective is to share common functionality between your object instances, then `prototype` is the way to go.

## 1. Modifying the common functionality is easy with Prototype

When you use `prototype` to attach common functions to objects, it is easy to modify the common logic even after the instances are created. The old and new objects will use the updated code. But this may not be possible if you attach the common code to each object instance, using `this.func()`.

Let's see this with an example.

```javascript

function Parent(gender){
  this.gender = gender;

  // attach the common function to each object instance.
  this.yellAtChild = function(){
    console.log('Somebody gonna get a hurt real bad!');
  }
}

// Let's create dad and mom and start yelling at kids.
var dad = new Parent('male');
var mom = new Parent('female');
dad.yellAtChild(); // Somebody gonna get a hurt real bad!
mom.yellAtChild(); // Somebody gonna get a hurt real bad!

// but, Russell has decide to sue you if you use his catch phrase.
// Let's try to tell our already created dad & mon to use different phrase.

// ERROR: Not possible to do this way.
Parent.yellAtChild = function() { .... }

// You need to override the `yellAtChild` method for each object instance.
dad.yellAtChild = function(){
  console.log('Shut up!');
};
mom.yellAtChild = function(){
  console.log('Go to bed!');
}
dad.yellAtChild(); // Shut up!
mom.yellAtChild(); // Go to bed!

```

As you can see, if you decide to change the common logic, you can not easily update the object methods since they are already created. You need to modify each and every instance of that object which is tedious.

Let's see the same example, but this time with `prototype`.

```javascript

function Parent(gender){
  this.gender = gender;
}

// Attach the common function to prototype.
Parent.prototype.yellAtChild = function(){
  console.log('Somebody gonna get a hurt real bad!');
};

// Let's create dad and mom and start yelling at kids.
var dad = new Parent('male');
var mom = new Parent('female');
dad.yellAtChild(); // Somebody gonna get a hurt real bad!
mom.yellAtChild(); // Somebody gonna get a hurt real bad!

// but, Russell has decide to sue you if you use his catch phrase.
// Simple: Just modify the function at Parent.prototype.

Parent.prototype.yellAtChild = function(){
  console.log('You are grounded.');
};

dad.yellAtChild(); // You are grounded
mom.yellAtChild(); // You are grounded

```

So, all the changes that you make to functions in `prototype` will reflect in all the instances of that object. Even for the new objects that you create will use the modifed method.

## 2. Prototype is fast and memory efficient.

When you attach methods to object instances, then each instance will have it's own copy of the method. This involves the system processing time and the memory.

But, when you attach the method to object's `prototype`, then only one version of the method exists. This doesn't need as much processing time and memory when compared to the above approach.

Let's see this with an example.

```javascript
var Parent = function(){
  this.yellAtKid = function(){
    console.log('Somebody gonna get a hurt real bad!');
  };
};
console.profile('Object Methods');
var dads = [];
for(var i=0; i<=10000000; i++){
  dads.push(new Parent());
}
console.profileEnd(); // 4903.267ms
```

When I profiled the above code in Firefox / Mac, the `populate()` method took about **4903.267ms** to execute. If I changed method attachment to `prototype` instead, like below:

```javascript
var Parent = function(){
};

Parent.prototype.yellAtKid = function(){
  console.log('Somebody gonna get a hurt real bad!');
};

console.profile('Prototype Methods');
var dads = [];
for(var i=0; i<=10000000; i++){
  dads.push(new Parent());
}
console.profileEnd(); // 3271.413ms
```

This time, the `populate()` method took only **3271.413ms** seconds. So, about **1.5 seconds** we save, just by reattaching the methods to `prototype`,

I hope that explains why `prototype` is best way to share common logic between your javascript objects.


Javascript Prototype methods vs Object methods


**TLDR;** [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline)

Just finished updating/redesigning (or messing up) [my online resume](https://veerasundar.com/resume/). For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284453065/"
  title="timeline by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3786/12284453065_87e377c0e9_c.jpg"
    width="800"
    height="557"
    alt="timeline"
  />
</a>

And, here's the responsive layout of the timeline in smaller screens.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284483625/"
  title="timeline-responsive by v33ra, on Flickr"
>
  <img
    src="http://farm8.staticflickr.com/7391/12284483625_0f187a5924_c.jpg"
    width="501"
    height="800"
    alt="timeline-responsive"
  />
</a>

After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo: [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline).

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.


Responsive timeline with CSS and HTML


Today, I am very happy to announce the launch of [countrack.me](http://countrack.me "A tool to track your activities anonymously").

> Countrack.me is a HTML5 / JavaScript application to track your daily activities anonymously.

It's been developed out of my own need to keep track of my activities. The idea-to-app happened in just 2 weeks, as 13 days ago I made [the first commit](https://github.com/vraa/countrack/commit/85f66b46476dba790e73ccf928ee4069ae4d2b8f). I designed the application, primarily keeping Mobile as the platform of choice.

Here's what the application looks like.

<a
  href="http://countrack.me"
  title="countrack.me - A tool to track your activities anonymously"
>
  <img
    src="http://farm8.staticflickr.com/7452/9654303220_fbe8facf08_c.jpg"
    width="800"
    height="600"
    alt="countrack.me screenshot"
  />
</a>

Here are some of the bullet points that tries to explain you about the application.

- Its 100% `JavaScript` application with no server code (except for the `nginx` that serves the static files).
- Its Free & [Open Source](http://github.com/vraa/countrack).
- There are no signup / signin BS (that makes one less password to remember). You can start using the application right now, as everything is client side, including your activity data which gets stored in browser's `localStorage`.
- Optionally, you can upload your data to [Firebase](http://firebase.com) if you happen to clear your browser cache often and want to keep a backup of your data. This is completely **opt-in** and without you uploading, the application won't send any of your data to any server.
- Offline mode enabled. Lost the internet connection? You can still use [countrack.me](http://countrack.me "A tool to track your activities anonymously")

It would be great if you [try out this tool](http://countrack.me "A tool to track your activities anonymously") and let me know your feedback.

This is just a start and I am hoping to add few more features to the app in the upcoming releases. If you happen to have any suggestion, please feel free to contact me or [open an issue](https://github.com/vraa/countrack/issues).


Launching Countrack.me - my new side project


Earlier, I talked about the [basics of JavaScript Closure](https://veerasundar.com/blog/javascript-closures/). In this post, lets continue to explore Closure with the help of some practical examples.

Before we begin, just to recap,

> Closure encloses function and the set of variables that were in scope of the function when it was declared. The variables inside the closure kept alive as long as the function alive.

With that in mind, let's make some closures.

## 1. Maintain State between function calls

Let's say you have function `add()` and you'd like it to add all the values passed to it in several calls and return the sum. For example,

```javascript
add(5); // returns 5
add(20); // returns 25 (5+20)
add(3); // returns 28 (25 + 3)
```

Of course, you can use a global variable in order to hold the total. But keep in mind that [this dude](http://en.wikipedia.org/wiki/Tyrannosaurus) will eat you alive if you (ab)use globals.

For scenarios like this, Closure is the best candidate for maintaining state between function calls without using globals. Let's see how.

```javascript
// Using IIFE, to not to pollute global namespace.
(function(){

  var addFn = function addFn(){
    // local to closure and hold the value inbetween multiple calls.
    var total = 0;
    return function(val){
      total += val;
      return total;
    }

  };

  var add = addFn();

  console.log(add(5)); // 5
  console.log(add(20)); // 25
  console.log(add(3)); // 28

}());
```

[Run this example on JSFiddle](http://jsfiddle.net/gHZjA/).

## 2. Partial application, a.k.a Currying

Suppose you have a function that takes several arguments and you only know values for some of the arguments in the beginning. For this scenario, you can make use of [Currying](http://en.wikipedia.org/wiki/Currying) technique to pre-fill the values for known arguments and supply values for the rest of the arguments later.

Here's an example, illustrating Currying using Closure.

Assume you have a `showMessage()` function that shows given message on screen with the given type and position. It takes three arguments. So, every time you want to call this function, you need to supply these three values.

```javascript
(function(){
  function showMessage(type, position, message){
    // displays a message at position and sets it type (for CSS styling)
  }

  showMessage('error', 'top', 'Not good.');
  showMessage('info', 'top', 'You better know this.');

}());
```

What if you want to make this function call, simpler? What if you create two other methods, namely, `showError()` and `showInfo()` that prefill the message type and position and supply the actual message in a later point in time? Let's Curry them.

The Curry function is taken from [John Resig's post](http://ejohn.org/blog/partial-functions-in-javascript/) (which btw is a good read [about Currying](http://ejohn.org/blog/partial-functions-in-javascript/)).

```javascript
(function(){

  // Lets add Curry method to Function so that we can call it on any function we want.
  Function.prototype.curry = function(){
    var fn = this, args = Array.prototype.slice.call(arguments);
    return function(){
      return fn.apply(this, args.concat(Array.prototype.slice.call(arguments)));
    };
  };

  // Core method.
  function showMessage(type, position, message){
    console.log('showing [' + message + '] of type [' + type + '] at [' + position + '].' );
  }

  // Create special versions of Core method using Currying.
  var showError = showMessage.curry('error', 'top');
  var showInfo = showMessage.curry('info', 'bottom');

  // Call our special methods.
  showError('Not good.');
  showInfo('You better know this.');

}());
```
[Run this example of JSFiddle](http://jsfiddle.net/3GqcW/)

## 3. Private methods in JavaScript?

Yes, we can emulate private methods in JavaScript using Closure. Let'e see how.

```javascript

(function(){

  var makeCar = function(){

    // private variable
    var fuel = 0;

    // private method
    function burnFuel(){
      fuel-=10;
      console.log('Burned fuel [10]');
    }

    return {
      accelerate : function(){
        if(fuel > 0){
          burnFuel();
        }else{
          console.log('Out of gas. Fill now.');
        }
      },

      fillGas : function(gas){
        if(fuel <= 100){
          fuel += gas;
        }else{
          console.log('Reached capacity. Stop spilling.');
        }
      }
    }

  };

  var car = makeCar();
  car.accelerate(); // Out of gas. Fill now.
  car.fillGas(75);
  car.accelerate(); // Burned fuel [10]
  car.accelerate(); // Burned fuel [10]

}());

```

[Run this example on JSFiddle](http://jsfiddle.net/Fka3b/)

As you can see, the `makeCar()` function returns an object with two methods: `accelerate` and `fillGas`. These two methods has access to the private method `burnFuel` and private variable `fuel`. But the outer world can not directlty access these two.

So, with the help of closure you can simulate object oriented programming in JavaScript.

With that, I am concluding this post of Closure examples. Of course, these are not the *only* examples of Closures. There are lot many out there. Btw, If you have written closure for an interesting use case, feel free to share it in the comments section.
```


JavaScript Closure - examples


Let's say, I have a page with HTML Select box in it. The requirement is to reload the page whenever the user changes Select box value. For example, if you have country names dropdown and you need to show a new set of address fields whenever the user changes the country. As a long time JQuery user, coding this is a piece of cake.

```javascript
$('#selectBox').on('change', function(event){
  // Reload page.
});
```

That works well, in all browsers, as long as the user use mouse to select a new value.

But the problem arises when the user has to use keyboard arrow / TAB keys to select a new value.

* Chrome and Internet Exlorer 9 fires a *change* event as soon as you use arrow keys to select a new value.
* Firefox will wait till the Select box loose focus **and then** fires the *change* event. So, in Firefox, you have to use down/up arrow keys to choose the value and then press TAB in order to fire the *change* event.

In my case, this inconsistency was not acceptable. I wanted the Firefox behavior in IE/Chrome too, as it is more appropriate to reload the page once the user completed done with selecting a new value, instead of reloading every time the user press down arrow on Select box.

So, I came up with following piece of code and wrapped it as a JQuery plugin.

```javascript
(function($){

  $.fn.onSelect = function(callback){

    return this.each(function(){

      if(!$(this).is('select')){
        // this plug-in is only for Select elements.
        return;
      }

      var selectBox = $(this);
      selectBox.data('previousValue', selectBox.val());

      selectBox.on('keyup', function(event){
        if(event.which === 13){
          selectBox.blur();
        }
      });

      selectBox.on('click blur', function(event){
        if(selectBox.data('previousValue') != selectBox.val()){
          selectBox.data('previousValue', selectBox.val());
          callback.call(selectBox, event);
        }
        return false;
      });

    });

  };

}(jQuery));
```

So, after adding the above code, I can do this:

```javascript
$('#selectBox').onSelect(function(event){
  // Reload page.
});
```

The above code will reload page only when the user done with selecting a new value. The behavior will be consistent across Chrome / Firefox / Internet Explorer. I.e. the call back you pass to `onSelect` will be called:

* When user selects a new value using mouse.
* When user uses keyboard / arrow keys to scroll to different values of dropdown box and press TAB or ENTER key after choosing a value.

The code is hosted at Github - [onSelect](https://github.com/vraa/onselect) and you are free to modify and use the code anyway you like.



```


onSelect - JQuery Plugin


Recently, I was bitten by a IE bug.

On one of the page I am working on, there are two radio buttons. The requirement is to auto-submit the page when the user clicks on one of the radio button. Apart from the radio buttons, there is an `<input type="submit" onclick="someJavaScript(param1, param2);" />` element too, but this is hidden as per the UI requirements.

So, in order to do auto-submit of the page on click of radio button, my first approach was to, bind an event handler to the radio button and programmatically click on the submit button. Below is the source code to do this:

```javascript
(function(){
  $('#radioBtnId').on('click', function(event){
    $('#submitBtnId').click();
  });
}());
```

Well, a simple & straight forward code, isn't it!? But, IE8 doesn't think so (surprise!).

While the above code works well in Chrome / Firefox / IE9, it is failing in IE8. On investigating, I came to know that IE8 does not trigger events for the hidden elements.

So, IE is just being an IE here and I had to look for other ways to implement the auto-submit.

Luckily, in my case, the submit button need not to be clicked. It is enough if I could just invoke the `onclick` event handler defined in the submit element (this is a framework generated code, so I don't have control over it).

In JavaScript, you can call a function in multiple ways.

1. You can simple use the name of the function to call it: `doSomething()`.
2. In case of anonymous function, you can directly invoke it: `(function(){}());` This is known as [IIFE] (http://en.wikipedia.org/wiki/Immediately-invoked_function_expression "Immediately Invoked Function Expression").
3. You can either use `call` or `apply`. For example, `doSomething.apply(context, [])` / `doSomething.call(context, arg1, arg2)`.

So, I can use the third approach to invoke the `onclick` event handler here, as shown below.

```javascript
(function(){
  $('#radioBtnId').on('click', function(event){
    var submitBtn = document.getElementById('submitBtnId');
    submitBtn.onclick.apply(submitBtn);
  });
}());
```

That finally fixed it in IE8 and other browsers obliged too!
```


IE8 and Triggering event on hidden submit button


For the Backbone application I [talked about](https://veerasundar.com/blog/communicating-between-views-in-backbone/) earlier in this blog, I needed a way to organize child views of my main `ApplicationView`. At present, the main view contains three child views: `HeaderView`, `DocumentView` and `SidebarView`.

Initially my approach was to use an array. So, I created a property named `childViews : []` in my `ApplicationView` and added child views as below.

```javascript
createChildViews : function(){
  this.childViews = [];
  this.childViews['header'] = new HeaderView();
  this.childViews['document'] = new DocumentView();
  this.childViews['sidebar'] = new SidebarView();
}
```

This worked well until I tried to iterate the `childViews` array using Underscore's `_.each` method. Both native `Array.forEach()` and `_.each()` failed to iterate through `childViews[]`. Later, when I debugged, I found out that `childViews.length` was returning 0.

That got me puzzled, as I was clearly adding elements to the array, but the code says the array length was zero. Seriously, JS?

After a couple of minutes of Googling, figured out that, in JavaScript, when you add an element to an Array using **named index**, it doesn't affect the length property of that array.

For example, have a look at below code:
```javascript
var myArray = [];
myArray['header'] = 'Element Header';
myArray['document'] = 'Element Document';
alert(myArray.length); // alerts 0
myArray[0] = 'Zeroth element';
alert(myArray.length); // alerts 1
```

As you can see, when we add elements to `myArray` using named indexes, it doesn't affect the array length at all. But, when you add an element using an integer index, the array's length property changes.

So, with that learning, I dumped the arrays and changed my Backbone view code to handle the child views as below:

```javascript
createChildViews : function(){
  this.childViews = {
    header : new HeaderView(),
    doc : new DocumentView(),
    sidebar : new SidebarView()
  };
}

iterateChildViews : function(){
  _.each(this.childViews, function(childView){
    // make sure we are not touching other properties of childViews object.
    if(childView instanceof Backbone.View){
      // Do something with the view.
    }
  }, this);
}
```

With this code, even if I want to access my child views as `this.childViews['header']`, I am still be able to do so. And I could iterate my child views as well. Win!
```


Parent Views and Child views in Backbone


At work, I use [PowerShell] (http://en.wikipedia.org/wiki/Windows_PowerShell) a lot, mostly for Git commands. By default, the powershell prompt message shows you the full path of the current working directory. i.e. something like this;

    PS C:\vraa\workspace

Which is fine, but I'd like this prompt to be short and informative. In short, I'd want the prompt to:

- Show only the folder name, instead of full path.
- Show the current branch name if inside a Git repo.

Powershell provides an option to customize its behavior. You can write your customization, in terms of functions, and keep them in your $PROFILE file. So, in order to achive my requirement, I used following function.

1.  In Powershell, type `notepad.exe $PROFILE`.
2.  Add following function there.

```shell
function prompt{
  $p = Split-Path (
     Get-Location
     ) -Leaf
  
  git branch | foreach{
    if($_ -match "^\*(.*)"){
     $p += " [" + $matches[1] + " ] "
    }
  }
  
  $p = $p + ">"
  Write-Host $p -NoNewline -ForegroundColor Green
  return " "
}
```

Be sure to keep the function name as `prompt`. Save and restart Powershell.

After the above customization, when you are in a normal folder, Powershell prompt will look like this:

    foldername>

And, when inside a Git repo, the prompt message will look like:

    gitrepo [ master ] >

Thanks to [this] (http://techblogging.wordpress.com/2008/10/12/displaying-git-branch-on-your-powershell-prompt/) for the script to detect current Git branch name.

So, what is your [Powershell customization] (https://veerasundar.com/blog/using-multiple-versions-of-jdk-and-eclipse-in-single-machine/)?


This post explain how you can customize Powershell prompt to show the current Git branch name.

Customize Powershell Prompt Message


The backbone application that I am currently working on has a document section and a sidebar section.

To represent the brlow structure in Backbone, I came up with following views.

1.  `ApplicationView` - the container for the sub views.
2.  `DocumentView` - represents a current document being edited/displayed.
3.  `SidebarView` - shows relevant information for the document that is there in the DocumentView.

![Backbone Application](https://veerasundar.com/media/backbone-application.png)

My top level `ApplicationView` is holding references to both child views - `DocumentView` and `SidebarView`. The view hierarchy is:

![Backbone View structure](https://veerasundar.com/media/backbone-view-structure.png)

Now, when there is some user intraction happening in one of the child views, I need to communicate that event to the other child view. Since the child views do not know about each other (in other words, they don't hold references to each other, unlike the Parent view which holds references to all of its child views), I need to rely on some eventing mechanism.

After googling & reading other people opinions, following are the three different approaches that I considered in order achieve this.

## 1. Using the parent view as an Event relay

In the first approach, I used the parent `ApplicationView` to relay the events between its child views. Since the parent view has reference to all its child views, its easy to relay the event through the parent.

![Backbone event relay through parent views](https://veerasundar.com/media/backbone-view-event-relay.png)

The JavaScript code will be:

```javascript
var ApplicationView = Backbone.View.extend({

  initialize : function(){
    this.documentView = new DocumentView({parent:this});
    this.sidebarView = new SidebarView({parent:this});

    this.documentView.on('edit', this.documentEdited, this);
  },

  documentEdited : function(){
    // do some stuff
    this.sidebarView.trigger('documentEdit');
  }

});

var DocumentView = Backbone.View.extend({

  onEdit : function(){
    this.trigger('edit');
  }

});

var SidebarView = Backbone.View.extend({

  initialize : function(){
    this.on('documentEdit', this.onDocumentEdit, this);
  },

  onDocumentEdit : function(){
    // react to document edit.
  }

});
```

But, this approach is not so effective in real. Because I had to introduce an additional event handler method `documentEdited()` in the `ApplicationView` just to pass around the events. When there are several events that I need to pass, then it will become a nightmare to add event handlers for all those events in the parent view.

So, I looked at the second approach.

## 2. Using an EventBus to communicate between views

In this approach, I extended the `Backbone.Events` object and created an `EventBus` object. Then I injected this `EventBus` to all child views which then used to propogate events.

![Backbone views event communication through event bus](https://veerasundar.com/media/backbone-views-event-bus.png)

The JavaScript code for this appraoch will be:

```javascript
var ApplicationView = Backbone.View.extend({

  initialize : function(){

    this.eventBus = _.extend({}, Backbone.Events);

    this.documentView = new DocumentView({
      eventBus : this.eventBus
    });
    this.sidebarView = new SidebarView({
      eventBus : this.eventBus
    });

  },

});

var DocumentView = Backbone.View.extend({

  initialize : function(options){
    this.eventBus = options.eventBus;
  },

  onEdit : function(){
    this.eventBus.trigger('documentEdit');
  }

});

var SidebarView = Backbone.View.extend({

  initialize : function(options){
    this.eventBus = options.eventBus;
    this.eventBus.on('documentEdit', this.onDocumentEdit, this);
  },

  onDocumentEdit : function(){
    // react to document edit.
  }

});
```

In this approach, I am using the `EventBus` object like a global event registry. If I want to views to talk between each other, I just inject the common `EventBus` in both of them and then trigger events/listen to events using te `EventBus`.

**Note**: If you do not want a global event registry, you can still create module / view level event buses and share them across child modules/views.

This approach is much better than the first approach. But we have to manually inject the `EventBus` to each child views. So, there's some room for improvement in here. Hence, the third approach.

## 3. Using Backbone as the event bus

In the second approach, I created a seperate event bus object, extending `Backbone.Events`. But later, I learned that `Backbone` object itself is mixed with `Events`. So, if I use `Backbone` to propogate events, I can avoid creating one more event bus.

As an added advantage, I don't need to manually inject `Backbone` into each and every sub view since it is already available.

![Using backbone as the event bus](https://veerasundar.com/media/backbone-views-backbone-event-bus.png)

The JavaScript implementation will be:

```javascript
var ApplicationView = Backbone.View.extend({

  initialize : function(){
    this.documentView = new DocumentView();
    this.sidebarView = new SidebarView();
  },

});

var DocumentView = Backbone.View.extend({

  onEdit : function(){
    Backbone.trigger('documentEdit');
  }

});

var SidebarView = Backbone.View.extend({

  initialize : function(options){
    Backbone.on('documentEdit', this.onDocumentEdit, this);
  },

  onDocumentEdit : function(){
    // react to document edit.
  }

});
```

Conclusion
For now, I'm using the third approach, which uses the Backbone object as an event bus, in my project. IMO, this approach is somewhat cleaner than the other two (It still relies on Global `Backbone` object though, but it's okay in my case).

So, what approach would you use in your project? Feel free to share if you are following any better approaches than these to communicate between backbone views.



Communicating between views in Backbone


In my last post about [common Java violations][1], I listed a set of mistakes that java developers tend to make. While refactoring a Java project with the objective to resolve those violations, I used the refactoring features of Eclipse extensively to quickly change the code. Below is the compilation of such refactoring techniques.

[1]: https://veerasundar.com/blog/common-code-violations-in-java "common code violations in Java"

## 1. Adding curly braces around block level statements

It is often a good practice to wrap the block level statements with `{curly braces}`. But still, if there is only one statement in the block, then some developers prefer not to wrap them with `{}`. But Checkstyle will complain if you do so.

If you want to change this,

```java
    if(condition)
        doSomething;
```

to this:

```java
    if(condition){
        doSomething();
    }
```

Eclipse's **source cleanup **is there for your help.

1.  In *Project Explorer, *right click on the source folder and select *Source -> Clean up'¦*[![using source clean up to add curly braces around block statements][3]][3]
2.  Choose *Use custom profile *and then click *configure *next to the custom profile section.
3.  By default, clean up action is configured to do multiple cleanup task. Since we are focused only on adding curly braces, we will disable all other cleanup tasks. To do this, navigate to all the tabs in the *Custom Clean ups *window and deselect all the cleanups.
4.  Then in the *Code Style *tab, select the *Use blocks in if/while/for/do statements *option and click *OK.*
5.  Then in *Clean Up *dialog, click *Next *and the refactoring will occur. You'll be presented with a review page with the changes made.

[]: https://veerasundar.com/img/2012/10/use-block-statements.png

## 2. Joining to if statements into one

Lets say, you have a code like this:

```java
    if(isLoggedIn){
      if(isAdmin){
        doSecretStuff();
      }
    }
```

It is safe to combine the two _if_ statements into one, unless you have some other code in between the two *if *statements. Of course, you can manually edit the code to remove the second if and move the condition to up. But wait, when Eclipse can do this for us, why should we do it ourselves?![Join inner if statement with outer if statements][3]

[3]: https://veerasundar.com/img/2012/10/join-if-statements.png "join-if-statements"

1.  Place your cursor on the *if *keyword of the inner *if *statement.
2.  Press *Ctrl 1 *which will open a context menu.
3.  Select the option *Join 'if' statement with outer 'if' statement*.
4.  Voila! the two if statements are now combined into one.

You'll get:

```java
    if(isLoggedIn && isAdmin){
      doSecretStuff();
    }
```

## 3. Renaming a filed and its getter / setter methods

According to a [this][4], renaming an element is the mostly used refactoring in Eclipse. So, when you rename a field which has setter/getter methods, you'd manually rename those method names. But Eclipse can help here to simplify this.[![][6]][6]

[4]: http://stackoverflow.com/a/1858592/42372 "Eclipse: Most useful refactorings"

[]: https://veerasundar.com/img/2012/10/rename-field-getter-setter.png

1.  Place your cursor on the field name that you want to rename.
2.  Press *Ctrl Shift *and then press *R key *two times continuously which will open the '*Rename Field' *dialog box.
3.  Check the options 'Rename getter' and '_Rename setter'_ while providing a new name to your field.
4.  On clicking OK, this will rename the field as well as its getter/setter methods.

## 4. Inverting *if *statement

Suppose you have a code like this:

```java
    if(!isLoggedIn){
      // ask to login
    }else{
      // allow access
    }
```

Above code is 100% valid. But code quality tools such as Checkstyle might complain, because we are using a negativity check in the first condition (i.e. *!isLoggedIn*). When you have only one case (just the if block), then we can't do much about it. But when you have both *if *and *else*, then you can just invert the conditions to avoid this scenario.

1.  Place your cursor on the first *if *keyword.
2.  Press *Ctrl 1 *and then select *Invert 'if' statement*.
3.  Eclipse will invert the conditions and the corresponding blocks.
4.  Finally, you'll get:
    if(isLoggedIn){
    // allow access
    }else{
    // ask to login
    }

Helps to improve the readability of the code.

## Conclusion:

Of course, the above are just the tip of the iceberg. Eclipse is capable of doing much-more advanced refactoring. So, what are **your** secret refactoring techniques?


Eclipse refactoring on steroids


At work, recently I did a code cleanup of an existing Java project. After that exercise, I could see a common set of code violations that occur again and again in the code. So, I came up with a list of such common violations and shared it with my peers so that an awareness would help to improve the code quality and maintainability. I'm sharing the list here to a bigger audience.

The list is not in any particular order and all derived from the rules enforced by code quality tools such as [CheckStyle][1], [FindBugs][2] and [PMD][3].

[1]: http://checkstyle.sourceforge.net/ "Checkstyle is a development tool to help programmers write Java code that adheres to a coding standard"
[2]: http://findbugs.sourceforge.net/ "Find bugs in java program"
[3]: http://pmd.sourceforge.net/ " source code analyzer"

Here we go!

## Format source code and Organize imports in Eclipse:

Eclipse provides the option to auto-format the source code and organize the imports (thereby removing unused ones). You can use the following shortcut keys to invoke these functions.

- **Ctrl Shift F** - Formats the source code.
- **Ctrl Shift O** - Organizes the imports and removes the unused ones.

Instead of you manually invoking these two functions, you can tell Eclipse to auto-format and auto-organize whenever you save a file. To do this, in Eclipse, go to **Window -> Preferences -> Java -> Editor -> Save Actions** and then enable **Perform the selected actions on save** and check **Format source code** **Organize imports**.

## Avoid multiple returns (exit points) in methods:

In your methods, make sure that you have only **one exit point**. Do not use returns in more than one places in a method body.

For example, the below code is **NOT RECOMMENDED** because it has more then one exit points (return statements).

```java
    private boolean isEligible(int age){
      if(age > 18){
        return true;
      }else{
        return false;
      }
    }
```

The above code can be rewritten like this (of course, the below code can be still improved, but that'll be later).

```java
    private boolean isEligible(int age){
      boolean result;
      if(age > 18){
        result = true;
      }else{
        result = false;
      }
      return result;
    }
```

## Simplify if-else methods:

We write several utility methods that takes a parameter, checks for some conditions and returns a value based on the condition. For example, consider the **isEligible** method that you just saw in the previous point.

```java
    private boolean isEligible(int age){
      boolean result;
      if(age > 18){
        result = true;
      }else{
        result = false;
      }
      return result;
    }
```

The entire method can be re-written as a **single return** statement as below.

```java
    private boolean isEligible(int age){
      return age > 18;
    }
```

## Do not create new instances of Boolean, Integer or String:

Avoid creating new instances of Boolean, Integer, String etc. For example, instead of using `new Boolean(true)`, use `Boolean.valueOf(true)`. The later statement has the same effect of the former one, but it has improved performance.

## Use curly braces around block statements.

Never forget to use curly braces around block level statements such as _if_, _for_, _while_. This reduces the ambiguity of your code and avoids the chances of introducing a new bug when you modify the block level statement.

**NOT RECOMMENDED**

```java
    if(age > 18)
      result = true;
    else
      result = false;
```

**RECOMMENDED**

```java
    if(age > 18){
      result = true;
    }else{
      result = false;
    }
```

## Mark method parameters as final, wherever applicable:

Always mark the method parameters as _final_ wherever applicable. If you do so, when you accidentally modify the value of the parameter, you'll get a compiler warning. Also, it makes the compiler to optimize the byte code in a better way.

**RECOMMENDED**

```java
    private boolean isEligible(final int age){ ... }
```

## Name _public static final_ fields in UPPERCASE:

Always name the _public static final_ fields (also known as _Constants_) in UPPERCASE. This lets you to easily differentiate constant fields from the local variables.

**NOT RECOMMENDED**

```java
public static final String testAccountNo = "12345678";
```

**RECOMMENDED**

```java
public static final String TEST_ACCOUNT_NO = "12345678";
```

## Combine multiple _if_ statements into one:

Wherever possible, try to combine multiple _if_ statements into single one.

For example, the below code;

```java
    if(age > 18){
      if( voted == false){
        // eligible to vote.
      }
    }
```

can be combined into single _if_ statements, as:

```java
    if(age > 18 && !voted){
      // eligible to vote
    }
```

## _switch_ should have _default_:

Always add a _default_ case for the _switch_ statements.

## Avoid duplicate string literals, instead create a constant:

If you have to use a string in several places, avoid using it as a literal. Instead create a String constant and use it.

For example, from the below code,

```java
    private void someMethod(){
      logger.log("My Application"   e);
      ....
      ....
      logger.log("My Application"   f);
    }
```

The string literal 'My Application' can be made as an Constant and used in the code.

```java
    public static final String MY_APP = "My Application";

    private void someMethod(){
      logger.log(MY_APP   e);
      ....
      ....
      logger.log(MY_APP   f);
    }
```

## Additional Resources:

- A collection of [Java best practices][4].
- List of available [Checkstyle checks][5].
- List of [PMD Rule sets][6]

[4]: http://www.javapractices.com/home/HomeAction.do
[5]: http://checkstyle.sourceforge.net/availablechecks.html
[6]: http://pmd.sourceforge.net/rules/index.html


Common code violations in Java


It's been few months since I started the [twikural][1] service. For the people who didn't know about Twikural;

[1]: http://twikural.veerasundar.com/ "Twikural - Daily thirukural"

[Twikural][2] is a web service that sends two couplets from the well known *[Thirukkural book][3] *everyday to its subscribers. People can subscribe to the service via either [Twitter][4] or [Facebook][5].

I have already open sourced the [code behind twikural][6]. If you like to browse the source code, you are welcomed to do so in [Github][7].

[2]: http://twikural.veerasundar.com/ "Twikural - Daily Thirukural"
[3]: http://en.wikipedia.org/wiki/TirukkuÃ¡¹€ºaÃ¡¸· "Thirukkural"
[4]: https://twitter.com/twikural "twikural"
[5]: https://www.facebook.com/twikural
[6]: https://veerasundar.com/blog/open-sourcing-twikural-an-app-engine-project "Open sourcing Twikural"
[7]: https://github.com/vraa/twikural "Twikural source code in Github"

In this post, I'm going to explain the details behind the project and how the entire thing works. Lets begin.

## The Big Picture

[![][9]][9]

[]: http://twikural.veerasundar.com

The site runs on **Google App Engine **and built using **Java 7**. The Java code does not use any fancy frameworks - it's all plain old Servlets and JSPs. But in the front end, I am using **Twitter Bootstrap** to ease the designing task and supporting different screen sizes. To interact with Twitter, I'm using **Twitter4j**.

There are two *cron jobs *that scheduled to run at 9 AM and 6PM respectively and sends out the tweets and Direct messages to the subscribed users. Then twitter takes care of updating the Facebook status of Twikural page.

As you can see in the above picture, the site talks only to Twitter, even though it supports Facebook as a subscription channel. This made possible by using the Facebook integration feature that Twitter provides. Using this, whenever there's a tweet is published, Twitter will automatically update the connected Facebook page status.

Users can subscribe via either [Twitter][9] or [Facebook][5]. The advantage of subscribing via Twitter is that the user will get an direct message (and possibly an SMS if he'd enabled it).

[9]: https://twitter.com/twikural

So that's pretty much about what's happening behind Twikural at a higher level. If you'd like to read Thirukkural everyday, you should [subscribe to Twikural][10]. And feel free to share your feedback. The comments are always welcomed.

[10]: http://twikural.veerasundar.com/subscribe.jsp "Subscribe to Twitter"


Twikural - How it works?


In this post, I'm going to show you what EasyMock is and how you can use it for testing your java application. For this purpose, I'm going to create a **simple Portfolio **application and test it using **JUnit & EasyMock** libraries.

Before we begin, lets first understand the need behind using EasyMock. Lets say, you are building an Android mobile application for maintaining user's stock portfolios. Your application would use a stock market service to retrieve stock prices from a real server (such as NASDAQ).

When it comes to testing your code, you wouldn't want to hit the real stock market server for fetching the stock prices. Instead, you would like some dummy price values. So, you need to mock the stock market service that returns dummy values without hitting the real server.

**EasyMock** is exactly doing the same - helps you to mock interfaces. You can pre-define the behavior of your mock objects and then use this mock object in your code for testing. Because, you are only concerned about testing **your logic** and not the external services or objects. So, it makes sense mock the external services.

To make it clear, have a look at the below code excerpt (we'll see the complete code in a while):

```java
StockMarket marketMock = EasyMock.createMock(StockMarket.class);
EasyMock.expect(marketMock.getPrice("EBAY")).andReturn(42.00);
EasyMock.replay(marketMock);
```

In the first line, we ask the EasyMock to create a mock object for our StockMarket interface. And then in the second line, we define how this mock object should behave - i.e., when the *getPrice()* method is called with the parameter *'EBAY'*, the mock should return *42.00*. And then, we call the *replay()* method, to make the mock object ready to use.

So, that pretty much set the context about the EasyMock and it's usage. Let's dive into our **Portfolio **application.

You can download the complete source code [from Github][1].

## Portfolio application

 [1]: https://github.com/vraa/SimplePortfolio "Simple portfolio source code in GitHub"

Our Portfolio application is really simple. It has a **Stock **class to represent a stock name and quantity and the **Portfolio **class to hold a list of stocks. This Portfolio class has a method to calculate the total value of the portfolio. Our class uses a **StockMarket **(an interface) object to retrieve the stock prices. While testing our code, we will mock this **StockMarket **using EasyMock.

### Stock.java

A very simple Plain Old Java Object (POJO) to represent a single stock.

```java
package com.veerasundar.easymock;

public class Stock {

  private String name;
  private int quantity;

  public Stock(String name, int quantity) {
    this.name = name;
    this.quantity = quantity;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getQuantity() {
    return quantity;
  }

  public void setQuantity(int quantity) {
    this.quantity = quantity;
  }

}
```

### StockMarket.java

An interface to represent a stock market service. It has a method that returns the stock price of the given stock name.

```java
package com.veerasundar.easymock;

public interface StockMarket {
  public Double getPrice(String stockName);
}
```

### Portfolio.java

This object holds a list of **Stock **objects and a method to calculate the total value of the portfolio. It uses a **StockMarket **object to retrieve the stock prices. Since it is not a good practice to hard code the dependencies, we haven't initialized the **stockMarket **object. We'll inject it later using our test code.

```java
package com.veerasundar.easymock;

import java.util.ArrayList;
import java.util.List;

public class Portfolio {

  private String name;
  private StockMarket stockMarket;

  private List<Stock> stocks = new ArrayList<Stock>();

  /*
   * this method gets the market value for each stock, sums it up and returns
   * the total value of the portfolio.
   */
  public Double getTotalValue() {
    Double value = 0.0;
    for (Stock stock : this.stocks) {
      value += (stockMarket.getPrice(stock.getName()) * stock
          .getQuantity());
    }
    return value;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public List<Stock> getStocks() {
    return stocks;
  }

  public void setStocks(List<Stock> stocks) {
    this.stocks = stocks;
  }

  public void addStock(Stock stock) {
    stocks.add(stock);
  }

  public StockMarket getStockMarket() {
    return stockMarket;
  }

  public void setStockMarket(StockMarket stockMarket) {
    this.stockMarket = stockMarket;
  }
}
```

So, now we have coded the entire application. In this, we are going to test the **Portfolio.getTotalValue() **method, because that's where our business logic is.

## Testing Portfolio application using JUnit and EasyMock

If you haven't used JUnit before, then it is a good time to [Get started with JUnit][2].

### PortfolioTest.java

 [2]: https://veerasundar.com/blog/getting-started-with-junit-4-java-testing-framework "Getting started with JUnit 4"

```java
package com.veerasundar.easymock.tests;

import junit.framework.TestCase;

import org.easymock.EasyMock;
import org.junit.Before;
import org.junit.Test;

import com.veerasundar.easymock.Portfolio;
import com.veerasundar.easymock.Stock;
import com.veerasundar.easymock.StockMarket;

public class PortfolioTest extends TestCase {

  private Portfolio portfolio;
  private StockMarket marketMock;

  @Before
  public void setUp() {
    portfolio = new Portfolio();
    portfolio.setName("Veera's portfolio.");
    marketMock = EasyMock.createMock(StockMarket.class);
    portfolio.setStockMarket(marketMock);
  }

  @Test
  public void testGetTotalValue() {

    /* = Setup our mock object with the expected values */
    EasyMock.expect(marketMock.getPrice("EBAY")).andReturn(42.00);
    EasyMock.replay(marketMock);

    /* = Now start testing our portfolio */
    Stock ebayStock = new Stock("EBAY", 2);
    portfolio.addStock(ebayStock);
    assertEquals(84.00, portfolio.getTotalValue());
  }

}
```

As you can see, during **setUp()** we are creating new **Portfolio** object. Then we ask **EasyMock **to create a mock object for the **StockMarket** interface. Then we inject this mock object into our portfolio object using *portfolio.setStockMarket()* method.

In the **@Test** method, we define how our mock object should behave when called, using the below code:

```java
EasyMock.expect(marketMock.getPrice("EBAY")).andReturn(42.00);
EasyMock.replay(marketMock);
```

So, here after our mock object's **getPrice** method** **would return *42.00* when called with *EBAY*.

Then we are creating a **ebayStock** with 2 quantities and add that to our portfolio. Since we setup the stock price of EBAY as 42.00, we know that the total value of our portfolio is 84.00 (i.e. 2 x 42.00). In the last line, we are asserting the same using the JUnit **assertEquals()** method.

The above test should run successfully if we haven't made any mistakes in the **getTotalValue() **code. Otherwise, the test would fail.

## Conclusion

So, that's how we use the **EasyMock** library to mock the external services/objects and use them in our testing code. EasyMock can do much more than what I shown in this post. I'll probably try to cover some advanced usage scenarios in my next posts.
```


EasyMock tutorial - Getting Started


Constants are the constant things in a project. I mean, it is safe to assume that any project would have some kind of constant values used across the code.

The common practice in Java is to declare them as public, static and final variables so that they can be easily referenced wherever they needed.

Here's a list of patterns that I have seen on using such constants.

## 1. Define a Constants class

In this approach, you define a class 'Constants' and put all your constants inside this class. Then reference the constants as 'Constants.CONST_NAME' wherever needed. Easy as it looks.

```java
    public class Constants {
    	public static final String SITE_NAME="veerasundar.com";
    }

    class Hello{
    	public void someFun(){
    		System.out.print(Constants.SITE_NAME);
    	}
    }
```

But the con of this approach is that you need to prepend the class name 'Constants' all the time. If you are using constants very frequently, then this will become little ineffective. We can do better.

## 2. Define a Constants interface and implement it

The second approach is that you define an Interface that contains all your constants and then implement this interface in the class where you want to use the constants. This way, you don't need to prefix 'Constants', instead you can directly access the constant like CONSTANT_NAME.

```java
    public interface Constants {
    	public static final String SITE_NAME="veerasundar.com";
    }

    class Hello implements Constants{
    	public void someFun(){
    		System.out.print(SITE_NAME);
    	}
    }
```

But this approach is generally considered as a bad practice because it pollutes the class's implementation hierarchy. You are forced to implement an interface without much semantic meaning. We can still do better than this.

## 3. Use Java static imports

Static imports are introduced in Java 5. Using static imports you can import static members/properties of a class so that you can directly access them without prefixing it's parent class's name. So, we can define a *Constants *class as shown in first approach above and the use static imports to use the constant properties directly.

```java
    package com.test;
    public class Constants {
    	public static final String SITE_NAME = "veerasundar.com";
    }

    import static com.test.Constants.*;
    public class Hello {
    	public void someFun() {
    		System.out.print(SITE_NAME);
    	}
    }
```

So, we get the best of both worlds - we don't unnecessarily prefix *Constants *everywhere, and we don't pollute class's API too. Win!

But this approach too has some bad press against it. If you use static imports very often, then your code become hard to read and understand. Especially when you statically import a lot of methods. So, use it sparingly and wisely.

What do you think as the best of the above three approaches? Do you use any other approaches other than these? Feel free to comment!


Java Constants - using Class, Interface, Static Imports


**tldr; **

It all started when I asked the following question to my twitter friends:

> Juts checking: If there's a service that sends you a Thirukkural every day, would you be signing up for it?
>
> '€ Veera (@vraa) [January 31, 2012][1]

[1]: https://twitter.com/vraa/status/164394058238799873

My idea was simple: to send out Thirukural poems everyday to the people that are signing up for the service. Instead of sending it to email addresses, I decided to use Twitter and Facebook as my medium since that's where most of the people are hanging out these days.

There were few tweeples responding to it positively. Even though there are already few other alternative services available, I decided to move on and build it as I thought the new service will be different and be a learning experience.

It took a weekend to code the 80% of the site and I hosted it on App Engine platform. And the site is live for the past few weeks -

[![][3]][3]

[]: http://twikural.veerasundar.com

Now, the service has [31 followers in Twitter][3] and [37 Likes in Facebook][4]. It has already sent out 120 Thirukurals till date. ![:)][5]

[3]: https://twitter.com/#!/twikural
[4]: https://www.facebook.com/twikural
[5]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

And, I'm now open sourcing the code. The project is now [hosted @ Github][6]. You are welcomed to check it out and if you'd like to contribute, feel free to send a pull request / contact me.

[6]: https://github.com/vraa/twikural

I would like to thank my fellow tweeples - [@iGhillli][7], [@anandhame][8], [@mgobi_php][9]   for their continuous support to this project.

[7]: https://twitter.com/#!/iGhillli
[8]: https://twitter.com/#!/anandhame
[9]: https://twitter.com/#!/mgobi_php


Open sourcing Twikural - an App Engine project


While browsing the net, I found this problem somewhere - to write a code that tests the given two strings are anagrams or not. From Wiki,

> 'An **anagram** is a type of word play, the result of rearranging the letter of a word or phrase to produce a new word or phrase, using all the original letters exactly once; for example *orchestra* can be rearranged into *carthorse*.'

I tried to solve this problem using Java and below is the result of it. The algorithm I tried is very simple:

1.  Clean the input - remove all the spaces and punctuation marks (because it doesn't affect the compassion).
2.  Go through character by character from string _one_ and check if that character exists in string _two_.
3.  If exists, then remove it from string *two *and move on to next character. If not exists, then we found a mismatch and the string is not an anagram.
4.  If all character from string *one *exists in string _two_, then we found it's an anagram.

##  Java code to test two strings are anagrams:

[gist id="2007044"]

I tested the above code with most of the anagrams found in the [Anagram Site][1] and it worked well.

[1]: http://www.anagramsite.com/ "Anagram site"

If you think the above code can be improved in someway, feel free to comment.


Anagram tester in Java


As part of this blog's re-design, I wanted to show the number of posts and comments as a widget in the sidebar. But I couldn't find a plugin that does exactly what I wanted. So, I wrote one on my own.

Below is the source code for this wordpress plug-in which you can drop it in your *plugins *folder and then activate it as usual. Then, in your *Widgets* section, you'll see a new widget that you can use it in your sidebar.

## Source for WordPress StatsBoard plugin to display the posts and comments count:

[gist id='1976268']

You can use the plugin however the way you want, of course, at your own risk! ![:)][1]

[1]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif


WordPress plugin to show the posts and comments count in the sidebar


Sometimes, I'm just lazy to type 'Ëœ*console.log*'Ëœ to print some data on the Firebug console. I often wanted to have a simple *echo() *function that spits whatever it gets to the console.

So, in every single JavaScript project I work on, I used to have this utility method:

```javascript
    function echo(obj){
      console.log(obj);
    }
    ...
    echo('Hello World');
```

It worked well. But there was a problem. The printed message on the console will always show the line number of *console.log  *as the source line number instead of showing the where exactly the *echo() *function is invoked.

There's another way to solve this. Instead of creating a new *echo() *method, I just need to bind it to the existing *console.log() *to a variable and the logging works like a charm. Like this,

```javascript
    window.echo = console.log.bind(console);
    window.oops = console.error.bind(console);
    ...
    echo('hello world');
    ...
    oops('I did it again');
```

The methods became shorter and the correct line numbers printed on the console!


Shortcut to console.log


Currently I'm rewriting my [Timelinr][1] application entirely using JavaScript, thus replacing PHP which is now generating the timeline. In my code,  I have an *Event *object which looks like this:

[1]: https://veerasundar.com/timelinr/ "Timeline - create timeline online"

```javascript
    function Event(d1, d2, name) {
    	this.start = d1;
    	this.end = d2;
    	this.name = name;
    }
```

When the user adds an event to the timeline, I create a new event object and push it to an array. But it is not guaranteed that the user will add events in any chronological order. So, when the array is modified, I should make sure that the list is sorted, ordered by event start date.

JavaScript array provides an inbuilt *sort()* method. But the default functionality is limited that it sorts by converting all the elements to strings. Obviously, this sorting isn't enough for my custom object as I needed to sort the date.

The *sort()* method can accept a callback function which then determines the custom sorting order. This callback takes two parameters (a,b), compares them and finally returns a result based on the comparison.

- If it returns zero, then a and b won't be swapped (sorted as they are equal).
- It it returns less than zero, then *a *will be placed before* b *in the list.
- Otherwise, *a *will be placed after *b *in the list.

Considering that, my custom sorting function looks like this:

```javascript
    function eventSorter(a, b) {
    	if (a.start == b.start) {
    		return 0;
    	} else {
    		return a.start < b.start ? -1 : 1;
    	}
    }

    itemsArray.sort(eventSorter);
```

which will then sorts an array based on the start date.


Sorting an array of custom objects in JavaScript


Let's say you are using some external components in your web page that renders a button as below:

The above code will call the *delete() *method when user clicks on the button.

But, what if you want to show a confirmation box before calling the _delete()_? Since the code is rendered by a external component, most probably you won't be having control over how its code generated.

So, you have to intercept the onclick event and block it until your method is called and then invoke the original method.

Lets do it..

```javascript
    var btn = $("#btn");
    btn.data("funcToCall", btn.attr("onclick"));
    $("#btn").removeAttr("onclick");
    $("#btn").bind("click", function(e){
    	if(confirm("Are you sure?")){
    		var func = $(this).data("funcToCall");
    		eval(func);
    	}
    });
```

As you can see, the *onclick *function is first stored into that element and then the *onclick *attribute is removed. Finally when the button in clicked, our custom method is called first and based on the user decision, the *delete() *method is either called or not called.


Intercepting onclick event in JavaScript using JQuery


It is often a requirement that you need to connect to a server through [HTTP][1] from your android application. When you use servlets/html, making such requests are a [no-brainer][2]. But, in Android it needs some searching before implementing such functions.

[1]: https://veerasundar.com/blog/hosting-java-applications-in-the-web "Hosting Java applications in the web"
[2]: https://veerasundar.com/blog/implementing-ajax-in-java-web-application-using-jquery "Implementing Ajax in Java web application using JQuery"

Here's some sample code snippets that explains how you can make GET and POST requests from your android application.

## Enable Internet permission for your android application:

Before making any use of internet in your android application, you should enable the internet permission for your application. To do this, open the *AndroidManifest.xml *file and then add the below line:

## HTTP GET request in Android application:

```java
    public static String getHttpResponse(URI uri) {
    	Log.d(APP_TAG, "Going to make a get request");
    	StringBuilder response = new StringBuilder();
    	try {
    		HttpGet get = new HttpGet();
    		get.setURI(uri);
    		DefaultHttpClient httpClient = new DefaultHttpClient();
    		HttpResponse httpResponse = httpClient.execute(get);
    		if (httpResponse.getStatusLine().getStatusCode() == 200) {
    			Log.d("demo", "HTTP Get succeeded");

    			HttpEntity messageEntity = httpResponse.getEntity();
    			InputStream is = messageEntity.getContent();
    			BufferedReader br = new BufferedReader(new InputStreamReader(is));
    			String line;
    			while ((line = br.readLine()) != null) {
    				response.append(line);
    			}
    		}
    	} catch (Exception e) {
    		Log.e("demo", e.getMessage());
    	}
    	Log.d("demo", "Done with HTTP getting");
    	return response.toString();
    }
```

## HTTP POST request in Android application:

A POST request is slightly (well, vastly) different from a GET request (I have seen most developers use there requests interchangeably!). In a POST, we often send some parameters to change state of the objects in server.

In Android too, we have some mechanisms to send HTTP parameters while sending a POST request, which is shown in below code snippet.

```java
    public static String postHttpResponse(URI uri) {
    	Log.d(APP_TAG, "Going to make a post request");
    	StringBuilder response = new StringBuilder();
    	try {
    		HttpPost post = new HttpPost();
    		post.setURI(uri);
    		List params = new ArrayList();
    		params.add(new BasicNameValuePair("paramName", "paramValue"));
    		post.setEntity(new UrlEncodedFormEntity(params));
    		DefaultHttpClient httpClient = new DefaultHttpClient();
    		HttpResponse httpResponse = httpClient.execute(post);
    		if (httpResponse.getStatusLine().getStatusCode() == 200) {
    			Log.d(APP_TAG, "HTTP POST succeeded");
    			HttpEntity messageEntity = httpResponse.getEntity();
    			InputStream is = messageEntity.getContent();
    			BufferedReader br = new BufferedReader(new InputStreamReader(is));
    			String line;
    			while ((line = br.readLine()) != null) {
    				response.append(line);
    			}
    		} else {
    			Log.e(APP_TAG, "HTTP POST status code is not 200");
    		}
    	} catch (Exception e) {
    		Log.e(APP_TAG, e.getMessage());
    	}
    	Log.d(APP_TAG, "Done with HTTP posting");
    	return response.toString();
    }
```

Making GET and POST requests in android application


Recently learned a really cool trick for copy-pasting code in Eclipse.

Let's say you have the following code:

```java
    package com.veerasundar.demo;

    public class CopyCode {
    	private int nothing;
    }
```

Now copy the above code, go to any Eclipse project and right click on *source *folder and paste. See what happens! Impressive isn't it!?

Here's what Eclipse did: it parsed the clipboard, found that there's a Java code in it, create the necessary package structure for the code to fit in and then copied the code there.

Neat!


Copy paste code directly in Eclipse


Lets say that you have pushed your code live and now want to code for a new feature. And, suddenly a bug found in your live code (it happens! a LOT!) which needs an immediate fix from you. Now, you have two different coding tasks in your hand.

1.  Code for your feature - which you can not commit in your main code base, because of some partial work.
2.  At the same time, you can not fix the bug in the main code base and push it to live because of the partial code which could break the builds (and hearts of some tech support guys!).

So, what will you do? **Branch! **Lets create two different branches - one for feature and one for bug-fixes and you can happily code on your branches without fearing that it might break the main code base.\*\*  
\*\*

## Git Branch:

![git branching][1]

[1]: https://veerasundar.com/img/2011/06/git-branch.jpg "git-branch"

Branching is something that every developer often do. When you branch, Git is taking a copy of your main code base and saving it in a different name (imagine the _File -> Save as_). So, the changes you do in your branched code will not affect your main code.

Having said that, lets see how to create new branches in Git. I'm opening my [_helloworld_][2] project again with the clean working directory.

[2]: https://veerasundar.com/blog/git-tutorial-my-git-work-flow "My Git Workflow"

    ~/work/projects/helloworld$ git status
    # On branch master
    nothing to commit (working directory clean)

So, now I'm on the *master *branch which is the **default **branch in Git. I want to create a new feature to add line of text 'Hello India' to my file. For that, lets create a branch _india_.

    ~/work/projects/helloworld$ git branch india
    ~/work/projects/helloworld$ git branch
      india
    * master

There we go! In the first line, I ask Git to _create_ a new branch by giving a branch name _india_. In the second, I ask Git to *list *all the available branches which lists *india *and the default branch _master_. The \* marks denotes the branch you are currently in.

Now you created a new branch. But you are still in the *master *branch. You have to switch to the newly created branch before making any changes. Lets do that.

    ~/work/projects/helloworld$ git checkout india
    Switched to branch 'india'

Now we switched to the* india *branch. you can make your changes and commit as many times as you wish. This will not affect the *master *branch in any way (until your merge your changes back).\*

- ~/work/projects/helloworld$ gedit helloworld.txt
  ~/work/projects/helloworld$ git add helloworld.txt
  ~/work/projects/helloworld$ git status

  # On branch india

  # Changes to be committed:

  # (use "git reset HEAD ..." to unstage)

  #

  # modified: helloworld.txt

  #

  ~/work/projects/helloworld$ git commit -m "modified in india branch"
  [india 2b2fa49] modified in india branch
  1 files changed, 1 insertions( ), 0 deletions(-)

## Merging changes back to main branch:

![git merge][3]

[3]: https://veerasundar.com/img/2011/06/git-merge.jpg "git-merge"

Now it is time to merge your feature code to the main branch. In a simpler words, we are going to do this: **_master = master india_**!

    ~/work/projects/helloworld$ git checkout master
    Switched to branch 'master'
    ~/work/projects/helloworld$ git merge india
    Updating 8f8c6ba..2b2fa49
    Fast-forward
     helloworld.txt |    1
     1 files changed, 1 insertions( ), 0 deletions(-)

As you can see, to merge, first switch back to *master *branch then give the *merge *command with the branch name you want to merge. That simple! If you open the *helloworld.txt *file, you can see the changes made in the *india *branch. Also, you can give the command *git log helloworld.txt *which will display all the commits you made on this files, including the *india *branch changes too.

Life is not always this simple. When you merge, there's a possibility that conflicts could occur. I'll explain how to resolve these conflicts in my next post.


Git tutorial - branching and merging


As I promised on my previous article on [Getting started with Git][1], here is how I use Git in my day to day activities. Rather than explaining with a real project that I'm working (which I can't share!), I'm taking the 'ËœHello World' approach. What I'm going to do is to create a text file that contains the 'hello world' and then going to track it in Git.

[1]: https://veerasundar.com/blog/git-tutorial-getting-started "Git Tutorial - Getting Started"

I assume that you have [installed Git][2] on your machine and you have the PATH environment variable updated with Git's location. Also, I'm going to explain it with a local repository which means that I'll be creating the repository locally instead of cloning it from some remote repository. Let's start.

[2]: http://help.github.com/win-set-up-git/

## 1. Git repository creation

Open a terminal or command prompt and CD to your project directory. Then give the below command.

    c:> cd vraa/projects/helloworld
    C:/vraa/projects/helloworld>git init
    Initialized empty Git repository in C:/vraa/projects/helloworld/.git/

Now what I did was to create a** new local Git repository** to track my hello world project.

## 2. Git configuration - user name and email (one time)

Next thing is to setup a user name and email to be used in all my git commits. This is a one time activity per Git installation.

    C:/vraa/projects/helloworld> git config --global user.name "yourname"
    C:/vraa/projects/helloworld> git config --global user.email "your@mail.com"

## 3. Add a file to Git index and check status

Let's create a simple text file and see what Git feels about this file using **git status** command. Status will tell you the current status of the repository and branch details. And, in Git you don't need to check out anything before you start working on it. Just modify the file directly and then commit the changes later.

    C:/vraa/projects/helloworld> edit helloworld.txt
    C:/vraa/projects/helloworld> git status
    # On branch master
    #
    # Initial commit
    #
    # Untracked files:
    #   (use "git add ..." to include in what will be committed)
    #
    #       helloworld.txt
    nothing added to commit but untracked files present (use "git add" to track)

Ha! Git knows that there's a file but it is not tracking it yet. Well, we'll tell Git to track it (after all that is what Git is for!)

    C:/vraa/projects/helloworld> git add helloworld.txt
    C:/vraa/projects/helloworld> git status
    # On branch master
    #
    # Initial commit
    #
    # Changes to be committed:
    #   (use "git rm --cached ..." to unstage)
    #
    #       new file:   helloworld.txt

Now you can see that the status command tells you the list of files that will be committed. So, when you say **git add [filename]** you are asking the git to keep the file in _git index_ and track the changes. Simple, you are staging this file for commit. Next time when you do a commit all the files that are in index will be committed.

## 4. Let's commit the changes

By committing, you are moving your changes from _index_ to the _local repository_. Unlike Subversion, where a commit means saving code to a central repository, in git even after a commit the code will reside in your local repo. The outside world won't know about your changes, yet. So, you can fearlessly do as many commits as you wish.

    C:/vraa/projects/helloworld> git commit -m "initial commit"
    [master (root-commit) 812befb] initial commit
    warning: CRLF will be replaced by LF in helloworld.txt.
    The file will have its original line endings in your working directory.
     1 files changed, 1 insertions( ), 0 deletions(-)
     create mode 100644 helloworld.txt
    C:/vraa/projects/helloworld> git status
    # On branch master
    nothing to commit (working directory clean)

So, that's how my basic git workflow looks like. Creating a simple and committing and tracking changes using Git. In my [next post][3], I'll explain how I do more changes and differentiate between several file versions.

[3]: https://veerasundar.com/blog/git-tutorial-comparing-files-with-diff


Git Tutorial - My Git work flow


![git logo][1]I was a long time Subversion user then. So, when I got introduced to Git few months back, I was \*\*really\*\* confused. First of all, I couldn't visualize some of the concepts that Git talked about.

[1]: https://veerasundar.com/img/2011/06/git-logo.png "git-logo"

But then, as I started using Git in my day-to-day work, it got much easy to use and understand. Now there isn't a single day (except some of the weekends!) in which I don' t use a single Git command. It became an inseparable tool at my work.

So, just thought of writing my learning as a Git tutorial series to help a bit my fellow developers who want to switch over to Git. Let' start.

## Say Hello to Git

First of all, if you are coming from a Subversion/CVS background - mark my words - **forget everything you learned about version controlling**. Because Git has a completely different approach to version controlling. Lets see how it differs from other systems.

Git is distributed. Which means, when you clone a Git repo, you'll get a your own copy of that repo to work with in your local machine. In Git, you get your own code base, you make changes, commit as many times as you want without the fear of polluting the central repo and once you are confident push the code to central repository.

Before diving too much further, let's look at this awesome diagram which explains the Git workflow (thanks to [osteele.com][2], I have a printout of this pasted at my desk).

[2]: http://osteele.com

![git workflow][3]

[3]: https://veerasundar.com/img/2011/06/git.png "git"

As you can see in the above diagram, in Git, code lives in 4 different places

- **_remote repository _**- think of it as a Github repository or a remote server hosted in your company. As the name suggests, this code base does not live your local machine and You don't talk with remote repository often. Only when you pull a code initially and pushing the changes when you are done with it.
- **\*local repository** - \*when you clone a remote Git repo / or create a new repo, the code base is created here in the local repository. All commits you do will come here first. This lives in your local machine.
- **_index _**- one of the most confusing thing you'll ever hear in Git. This is something like a intermediate place between your working copy of code and your local repository. It's like a _staging area_ for your code. You use it to stage which files you want to track & commit. In my next post about *[My Git workflow][4] *you'll see how index is used. This code base too, lives in your local machine.
- **_workspace _**- it's your working directory where you create/edit/delete your files. This code resides in your local machine.

[4]: https://veerasundar.com/blog/git-tutorial-my-git-work-flow "Git tutorial - my git workflow"

Hope you get the basic concepts of Git. It is very important to understand it well before you start using Git. In my next post, I'll be writing about [my Git workflow][4]. Till then, feel free to [setup your Git environment][5].

[5]: http://help.github.com/win-set-up-git/ "This guide will walk you through the basics and explain a little bit about how everything works along the way."


Git Tutorial - Getting Started


Recently one of my blog reader *Surisetty *send me a question, asking me if it is possible **to write log messages of different levels (info, debug, etc) into different log files**? To answer his question, **yes, it is possible. **We can do this\*\* \*\*by extending the FileAppender class and writing our own logic.

Below is the proof of concept code written to demonstrate this. Before that, you can download the Eclipse project file to run this code in your environment.

[Download the Source code][1]

[1]: http://www.box.net/shared/g3esrz13q4

## To write different log levels in different log files

1.  Create a custom Log4j appender extending _FileAppender._
2.  In that, override the *append() *method and check for the log level before writing a log message. Based on the level, call the *setFile() *method to switch between corresponding log file.
3.  Also, use MDC to store the original log file name mentioned in the _log4j.properties_. This is needed because *setFile() *changes the log file name every time you call it. So, we need to keep a track of the original file name somehow. And, we can use [Log4j MDC][2] for this.

[2]: https://veerasundar.com/blog/log4j-mdc-mapped-diagnostic-context-what-and-why

## Custom Appender: LogLevelFilterFileAppender

```java
    package com.veerasundar.log4j;

    import java.io.File;
    import java.io.IOException;

    import org.apache.log4j.FileAppender;
    import org.apache.log4j.Layout;
    import org.apache.log4j.MDC;
    import org.apache.log4j.spi.ErrorCode;
    import org.apache.log4j.spi.LoggingEvent;

    /**
     * This customized Log4j appender will separate the log messages based on their
     * LEVELS and will write them into separate files. For example, all DEBUG
     * messages will go to a file and all INFO messages will go to a different file.
     *
     * @author Veera Sundar | https://veerasundar.com
     *
     */
    public class LogLevelFilterFileAppender extends FileAppender {

    	private final static String DOT = ".";
    	private final static String HIPHEN = "-";
    	private static final String ORIG_LOG_FILE_NAME = "OrginalLogFileName";

    	public LogLevelFilterFileAppender() {

    	}

    	public LogLevelFilterFileAppender(Layout layout, String fileName,
    			boolean append, boolean bufferedIO, int bufferSize)
    			throws IOException {
    		super(layout, fileName, append, bufferedIO, bufferSize);
    	}

    	public LogLevelFilterFileAppender(Layout layout, String fileName,
    			boolean append) throws IOException {
    		super(layout, fileName, append);
    	}

    	public LogLevelFilterFileAppender(Layout layout, String fileName)
    			throws IOException {
    		super(layout, fileName);
    	}

    	@Override
    	public void activateOptions() {
    		MDC.put(ORIG_LOG_FILE_NAME, fileName);
    		super.activateOptions();
    	}

    	@Override
    	public void append(LoggingEvent event) {
    		try {
    			setFile(appendLevelToFileName((String) MDC.get(ORIG_LOG_FILE_NAME),
    					event.getLevel().toString()), fileAppend, bufferedIO,
    					bufferSize);
    		} catch (IOException ie) {
    			errorHandler
    					.error(
    							"Error occured while setting file for the log level "
    									  event.getLevel(), ie,
    							ErrorCode.FILE_OPEN_FAILURE);
    		}
    		super.append(event);
    	}

    	private String appendLevelToFileName(String oldLogFileName, String level) {
    		if (oldLogFileName != null) {
    			final File logFile = new File(oldLogFileName);
    			String newFileName = "";
    			final String fn = logFile.getName();
    			final int dotIndex = fn.indexOf(DOT);
    			if (dotIndex != -1) {
    				// the file name has an extension. so, insert the level
    				// between the file name and the extension
    				newFileName = fn.substring(0, dotIndex)   HIPHEN   level   DOT
    						  fn.substring(dotIndex   1);
    			} else {
    				// the file name has no extension. So, just append the level
    				// at the end.
    				newFileName = fn   HIPHEN   level;
    			}
    			return logFile.getParent()   File.separator   newFileName;
    		}
    		return null;
    	}
    }
```

## log4j.properties file

```
    log4j.rootLogger = DEBUG, fileout
    log4j.appender.fileout = com.veerasundar.log4j.LogLevelFilterFileAppender
    log4j.appender.fileout.layout.ConversionPattern = %d{ABSOLUTE} %5p %c - %m%n
    log4j.appender.fileout.layout = org.apache.log4j.PatternLayout
    log4j.appender.fileout.File = C:/vraa/temp/logs.log
```

## Let's test our code

```java
    package com.veerasundar.log4j;

    import org.apache.log4j.Logger;

    public class Log4jDemo {

    	private static final Logger logger = Logger.getLogger(Log4jDemo.class);

    	public static void main(String args[]) {
    		logger.debug("This is a debug message");
    		logger.info("This is a information message");
    		logger.warn("This is a warning message");
    		logger.error("This is an error message");
    		logger.fatal("This is a fatal message");
    		logger.debug("This is another debug message");
    		logger.info("This is another information message");
    		logger.warn("This is another warning message");
    		logger.error("This is another error message");
    		logger.fatal("This is another fatal message");
    	}
    }
```


Log4j Tutorial - Writing different log levels in different log files


Let's say you have two Date objects _DateOne_ and _DateTwo_. Now you want to find the difference between these two dates and show that in a human readable format; for example '_the difference is 2 hours and 30 minutes_'. How do you do it in Java?

The obvious answer is, get the milliseconds from these two dates and find the difference. And, then manually convert these milliseconds into hours, minutes, seconds etc.

But, wait a second. There's an easy way to do this using the[ TimeUnit][1] class. TimeUnit represents time durations at a given unit of granularity and provides utility methods to convert across units, and to perform timing and delay operations in these units.

[1]: http://download.oracle.com/javase/6/docs/api/java/util/concurrent/TimeUnit.html

Have a look the below code which finds out the difference between two dates and returns them in the form of 'h* hours and m minutes'*.

```java

    public String getTimeDiff(Date dateOne, Date dateTwo) {
            String diff = "";
            long timeDiff = Math.abs(dateOne.getTime() - dateTwo.getTime());
            diff = String.format("%d hour(s) %d min(s)", TimeUnit.MILLISECONDS.toHours(timeDiff),
                    TimeUnit.MILLISECONDS.toMinutes(timeDiff) - TimeUnit.HOURS.toMinutes(TimeUnit.MILLISECONDS.toHours(timeDiff)));
            return diff;
    }

```

That simple, isn't it?
```


Finding the difference between two dates in Java


![ie-wtf][1]Sometimes you might want to read the 'class' attribute value of an HTML tag (for example _div_) from your JavaScript for processing. Almost all major JavaScript frameworks provide method to read attribute values, using which we can easily get the value of 'class' attribute.

[1]: https://veerasundar.com/img/2010/12/ie-wtf.jpg "ie-wtf"

But if you're not allowed to use any such libraries, then you would have to rely on the browser's built-in method **_getAttribute_ **to achieve the functionality.

Before you use the JavaScript's *getAttribute *method, do keep in mind that its implementation (especially for 'class' attribute) differs from browser-to-browser. I.e., IE does it differently from what other browsers are doing (as you would have expected!).

The below code would alert the _class_ value of *'myElem' *in all browser's. But, Internet Explorer would just say 'null'!

    var elem = document.getElementById("myElem");
    alert(elem.getAttribute("class"));

To make that work in Internet Explorer, change to 'className' and see what happens!

    var elem = document.getElementById("myElem");
    alert(elem.getAttribute("className"));

Now the above code will work **only in Internet Explorer **but will fail in all other browsers. ![:)][2]

[2]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

So what's the correct solution that works in **all browser? **Well, don't use the *getAttribute() *method at all. Instead, use the property **className **to get the class attribute value.

Here's the cross-browser solution:

    var elem = document.getElementById("myElem");
    alert(elem.className);

That should do the trick!


JavaScript getAttribute method


Sometime back, I wrote about [Java web application hosting][1], in which I listed out the different options available to you to [host your Java web applications][2]. Now, let's look at the different solutions to **host your code**.

[1]: https://veerasundar.com/blog/hosting-java-applications-in-the-web "Java web hosting"
[2]: https://veerasundar.com/blog/hosting-java-applications-in-the-web "java web hosting"

Before you dive in, please note that:

1.  Most (if not all) of the services provide the free plan only with basic features. Want more, pay them! ![:)][3]
2.  The focus is on Subversion hosting only (because at the end you might wonder why Github wasn't be seen in the list!).

[3]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

Let's list the [best web hosts][4] for your code!

[4]: http://www.hostingobserver.com/ "Hosting Observer - Your Guide to Finding the Best Web Host Online"

---

## Assembla

[![assembla-code-hosting][6]][6]

[]: http://www.assembla.com/

**Beanstalk**

[![beanstalk-code-hosting][7]][7]

**BerliOS**

[![][8]][8]

## Bootstrap Today

[![][9]][9]

## Bounty

[![bounty-source-code-hosting][10]][10]

## Codesion

[![][11]][11]

## Gna

[![][12]][12]

## Google Code

[![][13]][13]

## My Version Control

[![][14]][14]

## Project Locker

[![][15]][15]

## Slik SVN

[![][16]][16]

## SourceForge

[![][17]][17]

## Unfuddle

[![][18]][18]

## Versionshelf

[![][19]][19]

- - \*I'll be updating this list in future, if I come to know about a free code hosting solution. In case if you want to add anything to this list, please feel free to

[contact me][19].

[]: http://beanstalkapp.com/
[]: http://developer.berlios.de/
[]: http://bootstraptoday.com/
[]: https://www.bountysource.com/
[]: http://codesion.com/
[]: http://gna.org/
[]: http://code.google.com/hosting/
[]: http://www.myversioncontrol.com/
[]: http://www.projectlocker.com/
[]: http://www.sliksvn.com/
[]: http://sourceforge.net/
[]: http://unfuddle.com/
[]: http://www.versionshelf.com/
[19]: https://veerasundar.com/contact "contact me"


Hosting your code for free


Thread Local is an interesting and useful concept, yet most of the Java developers are not aware of how to use that. In this post, I'll explain what is Thread Local and when to use it, with an example code.

Since it'll be little tough to understand this concept at first, I'll keep the explanation as simple as possible (**corollary**: you shouldn't use this code _as it is_ in a production environment. Grasp the concept and modify upon it!)

Let's begin.

## What is Thread Local?

Thread Local can be considered as a scope of access, like a _request scope_ or _session scope_. It's a _thread scope_. You can set any object in Thread Local and this object will be _global_ and _local_ to the specific thread which is accessing this object. Global and local!!? Let me explain:

- Values stored in Thread Local are _global_ to the thread, meaning that they can be accessed from anywhere inside that thread. If a thread calls methods from several classes, then all the methods can see the Thread Local variable set by other methods (because they are executing in same thread). The value need not be passed explicitly. It's like how you use global variables.
- Values stored in Thread Local are _local_ to the thread, meaning that each thread will have it's own Thread Local variable. One thread can not access/modify other thread's Thread Local variables.

Well, that's the concept of Thread Local. I hope you understood it (if not, please leave a comment).

## When to use Thread Local?

We saw what is thread local in the above section. Now let's talk about the use cases. i.e. when you'll be needing something like Thread Local.

I can point out one use case where I used thread local. Consider you have a Servlet which calls some business methods. You have a requirement to generate a unique transaction id for each and every request this servlet process and you need to pass this transaction id to the business methods, for logging purpose. One solution would be passing this transaction id as a parameter to all the business methods. But this is not a good solution as the code is redundant and unnecessary.

To solve that, you can use Thread Local. You can generate a transaction id (either in servlet or better in a filter) and set it in the Thread Local. After this, what ever the business method, that this servlet calls, can access the transaction id from the thread local.

This servlet might be servicing more that one request at a time. Since each request is processed in separate thread, the transaction id will be unique to each thread (local) and will be accessible from all over the thread's execution (global).

Got it!?

## How to use Thread Local?

Java provides an [ThreadLocal][1] object using which you can set/get _thread scoped_ variables. Below is a code example demonstrating what I'd explained above.

[1]: http://download.oracle.com/javase/6/docs/api/java/lang/ThreadLocal.html "Class ThreadLocal"

Lets first have the `Context.java` file which will hold the transactionId field.

```java
package com.veerasundar;

public class Context {

	private String transactionId = null;

        /* getters and setters here */

}
```

Now create the `MyThreadLocal.java` file which will act as a container to hold our context object.

```java
package com.veerasundar;

/**
 * this class acts as a container to our thread local variables.
 * @author vsundar
 *
 */
public class MyThreadLocal {

	public static final ThreadLocal userThreadLocal = new ThreadLocal();

	public static void set(Context user) {
		userThreadLocal.set(user);
	}

	public static void unset() {
		userThreadLocal.remove();
	}

	public static Context get() {
		return userThreadLocal.get();
	}
}
```

In the above code, you are creating a ThreadLocal object as a static field which can be used by rest of the code to set/get thread local variables.

Let's create our main class file which will generate and set the transaction ID in thread local and then call the business method.

```java
package com.veerasundar;

public class ThreadLocalDemo extends Thread {

	public static void main(String args[]) {

		Thread threadOne = new ThreadLocalDemo();
		threadOne.start();

		Thread threadTwo = new ThreadLocalDemo();
		threadTwo.start();
	}

	@Override
	public void run() {
		// sample code to simulate transaction id
		Context context = new Context();
		context.setTransactionId(getName());

		// set the context object in thread local to access it somewhere else
		MyThreadLocal.set(context);

		/* note that we are not explicitly passing the transaction id */
		new BusinessService().businessMethod();
		MyThreadLocal.unset();

	}
}
```

Finally, here's the code for the `BusinessService.java` which will read from thread local and use the value.

```java
package com.veerasundar;

public class BusinessService {

	public void businessMethod() {
		// get the context from thread local
		Context context = MyThreadLocal.get();
		System.out.println(context.getTransactionId());
	}
}
```

When you run the ThreadLocalDemo file, you'll get the below output:

```java

    Thread-0
    Thread-1

```

As you might see, even though we are not explicitly passing the transaction id, the value can be accessed from the business method and printed on the console. Adding to it, the transaction ID differs for each thread (0 and 1).

Well, that's it. I hope I'd explained it in a simple possible way. Please let me know what do you think about this article in comments. Do leave a comment if you want to add anything to this topic.


This post explains about Java Thread Locals with Sample code.

Java Thread Local - How to use and code sample


Sometime back, when Arun [posted][1] a Python version of **Mars Rover problem**, I tried the same in Java. Btw, if you haven't heard about Mars Rover problem before, here's the text for you (Ctrl C & Ctrl V'ed from Arun's [post][1]).

[1]: http://www.arunrocks.com/blog/archives/2010/02/01/mars-rover-in-python-and-haskell/ "Mars Rover in Python and Haskell"

## Mars Rover problem:

A squad of robotic rovers are to be landed by NASA on a plateau on Mars.

This plateau, which is curiously rectangular, must be navigated by the rovers so that their on-board cameras can get a complete view of the surrounding terrain to send back to Earth.

A rover's position and location is represented by a combination of x and y co-ordinates and a letter representing one of the four cardinal compass points. The plateau is divided up into a grid to simplify navigation. An example position might be 0, 0, N, which means the rover is in the bottom left corner and facing North.

In order to control a rover , NASA sends a simple string of letters. The possible letters are 'L', 'R' and 'M'. 'L' and 'R' makes the rover spin 90 degrees left or right respectively, without moving from its current spot. 'M' means move forward one grid point, and maintain the same heading.

Assume that the square directly North from (x, y) is (x, y 1).

### INPUT:

The first line of input is the upper-right coordinates of the plateau, the lower-left coordinates are assumed to be 0,0.

The rest of the input is information pertaining to the rovers that have been deployed. Each rover has two lines of input. The first line gives the rover's position, and the second line is a series of instructions telling the rover how to explore the plateau.

The position is made up of two integers and a letter separated by spaces, corresponding to the x and y co-ordinates and the rover's orientation.

Each rover will be finished sequentially, which means that the second rover won't start to move until the first one has finished moving.

### OUTPUT:

The output for each rover should be its final co-ordinates and heading.

INPUT AND OUTPUT

Test Input:

5 5  
1 2 N  
LMLMLMLMM  
3 3 E  
MMRMMRMRRM

Expected Output:

1 3 N  
5 1 E

## Solution in Java:

```java

    package marsrover;
    public class Rover {
    	public static final Integer N = 1;
    	public static final Integer E = 2;
    	public static final Integer S = 3;
    	public static final Integer W = 4;
    	Integer x = 0;
    	Integer y = 0;
    	Integer facing = N;
    	public Rover() {
    	}
    	public void setPosition(Integer x, Integer y, Integer facing) {
    		this.x = x;
    		this.y = y;
    		this.facing = facing;
    	}
    	public void printPosition() {
    		char dir = 'N';
    		if (facing == 1) {
    			dir = 'N';
    		} else if (facing == 2) {
    			dir = 'E';
    		} else if (facing == 3) {
    			dir = 'S';
    		} else if (facing == 4) {
    			dir = 'W';
    		}
    		System.out.println(x   " "   y   " "   dir);
    	}
    	public void process(String commands) {
    		for (int idx = 0; idx < commands.length(); idx  ) {
    			process(commands.charAt(idx));
    		}
    	}
    	private void process(Character command) {
    		if (command.equals('L')) {
    			turnLeft();
    		} else if (command.equals('R')) {
    			turnRight();
    		} else if (command.equals('M')) {
    			move();
    		} else {
    			throw new IllegalArgumentException(
    					"Speak in Mars language, please!");
    		}
    	}
    	private void move() {
    		if (facing == N) {
    			this.y  ;
    		} else if (facing == E) {
    			this.x  ;
    		} else if (facing == S) {
    			this.y--;
    		} else if (facing == W) {
    			this.x--;
    		}
    	}
    	private void turnLeft() {
    		facing = (facing - 1) < N ? W : facing - 1;
    	}
    	private void turnRight() {
    		facing = (facing   1) > W ? N : facing   1;
    	}
    	public static void main(String args[]) {
    		Rover rover = new Rover();
    		rover.setPosition(1, 2, N);
    		rover.process("LMLMLMLMM");
    		rover.printPosition(); // prints 1 3 N
    		rover.setPosition(3, 3, E);
    		rover.process("MMRMMRMRRM");
    		rover.printPosition(); // prints 5 1 E
    	}
    }

```

After comparing my version with Arun's [version][2], all it came to my mind was, _Joe Armstrong's_ this quote:

[2]: http://www.arunrocks.com/blog/archives/2010/02/01/mars-rover-in-python-and-haskell/

> 'The problem with object-oriented languages is they've got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.'


Mars Rover in Java

I have already written about the _Spring Aspect Oriented Programming (AOP)_ with the use of simple logging example. But, somehow I felt that the example code was little confusing for the newcomers. So, I decided to write a new Spring AOP example code that explains how to use Spring AOP for profiling method execution time.

## Using Spring AOP to profile method execution time:

The example I chose is very simple: our application has a business class and a business method. We are going to profile how much time does it take to execute the business method. We will use Spring AOP for profiling the execution time. Since, profiling is a best example for _cross cutting concern_, it's a good decision to use Spring AOP for implementing it. I'll explain these in step by step. Meanwhile, you can [download the source code][1](excluding dependent JAR file, for which you can see the download links below).

[1]: http://www.box.net/shared/9nygu7t80t "Download source code for Spring AOP example"

And, here's the library versions I'm using: [Spring 2.5.4][2], JDK 1.6, [Commons-logging-1.0.4][3], [aspectjrt-1.2][4], [aspectjweaver-1.5.3][5].

[2]: http://s3.amazonaws.com/dist.springframework.org/release/SPR/spring-framework-2.5.4.zip "Download Spring 2.5.4 JAR"
[3]: http://mirrors.ibiblio.org/pub/mirrors/maven/commons-logging/jars/commons-logging-1.0.4.jar "Download commons logging"
[4]: http://mirrors.ibiblio.org/pub/mirrors/maven/aspectj/jars/aspectjrt-1.2.jar
[5]: http://mirrors.ibiblio.org/pub/mirrors/maven/aspectj/jars/aspectjweaver-1.5.3.jar

## 1. Setting up the project structure:

Launch your preferred IDE (I use Eclipse) and _Create New Java Project_. And then create the file structure as shown below (off course, no need to follow the package naming convention.

![Spring AOP - Project Structure][7]

[7]: https://veerasundar.com/img/2010/01/spring-aop-project-structure.png "spring-aop-project-structure"

You need to download all the JARs that are in _Referenced Libraries_ and add them to the project's class path. You can find these JARs here: [Spring][8], [Commons-logging][9], [aspectjrt][10], [aspectjweaver][11]. Also, please note that the file **Business.java** is an Interface. Other than this, all other java files are plain Classes.

[8]: http://s3.amazonaws.com/dist.springframework.org/release/SPR/spring-framework-2.5.4.zip "Download Spring"
[9]: http://mirrors.ibiblio.org/pub/mirrors/maven/commons-logging/jars/commons-logging-1.0.4.jar "Download Commons-logging"
[10]: http://mirrors.ibiblio.org/pub/mirrors/maven/aspectj/jars/aspectjrt-1.2.jar "Download AspectJrt"
[11]: http://mirrors.ibiblio.org/pub/mirrors/maven/aspectj/jars/aspectjweaver-1.5.3.jar "download Aspectjweaver"

## 2. Writing our Business Logic:

We will first write our business logic and then we will add Spring AOP to profile our business methods. Open _Business.java_ interface and copy the below code into it.

```java

    package com.veerasundar.spring.aop;

    public interface Business {
            void doSomeOperation();
    }

```

Now, open the *BusinessImpl.java* and copy the below code into it.

```java

    package com.veerasundar.spring.aop;

    public class BusinessImpl implements Business {

            public void doSomeOperation() {
                    System.out.println("I do what I do best, i.e sleep.");
                    try {
                            Thread.sleep(2000);
                    } catch (InterruptedException e) {
                            System.out.println("How dare you to wake me up?");
                    }
                    System.out.println("Done with sleeping.");
            }

    }

```

I guess this code is self explanatory. Our business method just sleeps for 2 seconds (good business, isn't it!?) and then write some text on the console.

## 3. Writing a Spring Aspect to profile business method:

Lets write a Aspect which will profile our business method. I'm gonna use **@Around** advice (Lost in the jargons? [Spring AOP basics][12]). Open the *BusinessProfiler.java* file and copy the below code into it.

 [12]: http://static.springsource.org/spring/docs/2.5.4/reference/aop.html#aop-introduction-defn "Spring AOP basics"

```java

    package com.veerasundar.spring.aop;

    import org.aspectj.lang.ProceedingJoinPoint;
    import org.aspectj.lang.annotation.Around;
    import org.aspectj.lang.annotation.Aspect;
    import org.aspectj.lang.annotation.Pointcut;

    @Aspect
    public class BusinessProfiler {

            @Pointcut("execution(* com.veerasundar.spring.aop.*.*(..))")
            public void businessMethods() { }

            @Around("businessMethods()")
            public Object profile(ProceedingJoinPoint pjp) throws Throwable {
                    long start = System.currentTimeMillis();
                    System.out.println("Going to call the method.");
                    Object output = pjp.proceed();
                    System.out.println("Method execution completed.");
                    long elapsedTime = System.currentTimeMillis() - start;
                    System.out.println("Method execution time: " + elapsedTime + " milliseconds.");
                    return output;
            }

    }

```

Here's what this code does:

1.  Using *@AspectJ* annotation, we have declared that this class is an Aspect.
2.  Using *@Pointcut* annotation, we have defined a pointcut that will match the execution of all public method inside com.veerasundar.spring.aop package**.** [[read more about pointcut][13]]
3.  Using *@Around* annotation, we have defined a Around advice which will be invoked *before* and *after* our business method. i.e. @Around advice will wrap our business method. As you can see in the above code, *pjp.proceed()***.** This is when our business method gets called from @Around advice.

 [13]: http://static.springsource.org/spring/docs/2.5.4/reference/aop.html#aop-pointcuts "Spring Aspect Oriented Programming - Pointcut examples"

## 4. Configuring Spring AOP and @AspectJ support:

Open the *applicationContext.xml* file and copy the below code into it.

```xml

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
    http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd">

        
        <aop:aspectj-autoproxy />

        <bean id="businessProfiler" class="com.veerasundar.spring.aop.BusinessProfiler" />
        <bean id="myBusinessClass" class="com.veerasundar.spring.aop.BusinessImpl" />
    </beans>

```

Here's what we are doing in the above XML file:

1.  We have added the [required AOP schemas][14] on the top of the XML file.
2.  Using , we've enabled the @AspectJ support to our application.
3.  And then we defined two normal Spring beans - one for our Business class and the other for Business Profiler (i.e. our aspect).

 [14]: http://static.springsource.org/spring/docs/2.5.4/reference/xsd-config.html#xsd-config-body-schemas-aop "XML Schemas required for Spring AOP support"

That's it. With all the above code is done, we have successfully added Spring AOP support to our project and configured it. In the next step, lets test our code.

## 5. Testing the Spring AOP profiler:

Open the file *SpringAOPDemo.java* and copy the below lines into it.

```java

    package com.veerasundar.spring.aop;

    import org.springframework.context.ApplicationContext;
    import org.springframework.context.support.ClassPathXmlApplicationContext;

    public class SpringAOPDemo {

            /**
             * @param args
             */
            public static void main(String[] args) {
                    ApplicationContext context = new ClassPathXmlApplicationContext(
                                    "applicationContext.xml");
                    Business bc = (Business) context.getBean("myBusinessClass");
                    bc.doSomeOperation();
            }

    }

```

In the above code we are loading our Business bean from Spring Context and then calling our business method. If you run this class, it will produce the following output on the console.

```java

    Going to call the method.
    I do what I do best, i.e sleep.
    Done with sleeping.
    Method execution completed.
    Method execution time: 2000 milliseconds.

```
I hope this tutorial helps you to understand the basics of Spring Aspect Oriented programming. If you have any questions regarding the above example, feel free to leave a comment**.**

Spring AOP Example: Profiling method execution time tutorial


As a continuation of my previous post about [Log4j MDC (Mapped Diagnostic Context)][1], here's a fully working code sample explaining the concept. This is a simple example where we have a one servlet and one filter. The filter intercepts each and every request and put the user name in the MDC.

[1]: https://veerasundar.com/blog/log4j-mdc-mapped-diagnostic-context-what-and-why "Log4j MDC (Mapped Diagnostic Context) : What and Why"

## The Servlet Class:

```java
package com.veerasundar.code.log4jmdc;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

/**
 * A good-for-nothing servlet which is just writing few messages to the logger
 * object. Since we've configured in the log4j.properties file to include the
 * userName, taken from MDC, every message will be appended with the user name
 * that is set from the AuthenticationFilter
 *
 */
public class Log4jMdcDemo extends HttpServlet {

	private static Logger logger = Logger.getLogger(Log4jMdcDemo.class);

	public Log4jMdcDemo() {
	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doService(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doService(request, response);
	}

	protected void doService(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		logger.info("This is  demo for the Log4j MDC concept");
		logger.info("From Veerasundar.com/blog");
		logger.debug("Just some sample messages");
	}
}
```

## A Filter to put the user name in MDC for every request call

```java

package com.veerasundar.code.log4jmdc;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

import org.apache.log4j.MDC;

/**
 * An example authentication filter which is used to intercept all the requests
 * for fetching the user name from it and put the user name to the Log4j Mapped
 * Diagnostic Context (MDC), so that the user name could be used for
 * differentiating log messages.
 *
 * @author veerasundar.com/blog
 *
 */
public class AuthenticationFilter implements Filter {

	@Override
	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {

		try {
			/*
			 * This code puts the value "userName" to the Mapped Diagnostic
			 * context. Since MDc is a static class, we can directly access it
			 * with out creating a new object from it. Here, instead of hard
			 * coding the user name, the value can be retrieved from a HTTP
			 * Request object.
			 */
			MDC.put("userName", "veera");

			chain.doFilter(request, response);

		} finally {
			MDC.remove("userName");
		}

	}

}
```

## Web.xml file to glue together Servlet and Filter

```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"   xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <servlet>
        <description/>
        <display-name>Log4jMdcDemo</display-name>
        <servlet-name>Log4jMdcDemo</servlet-name>
        <servlet-class>com.veerasundar.code.log4jmdc.Log4jMdcDemo</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Log4jMdcDemo</servlet-name>
        <url-pattern>/Log4jMdcDemo</url-pattern>
    </servlet-mapping>
    <filter>
        <filter-name>AuthFilter</filter-name>
        <filter-class>com.veerasundar.code.log4jmdc.AuthenticationFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>AuthFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
```

## Log4j.properties file which uses the data present in MDC

```java

    # sample log4j.properties file, explaining log4j MDC concept
    # author: veerasundar.com/blog

    log4j.appender.consoleAppender = org.apache.log4j.ConsoleAppender
    log4j.appender.consoleAppender.layout = org.apache.log4j.PatternLayout

    #note the %X{userName} - this is how you fetch data from Mapped Diagnostic Context (MDC)
    log4j.appender.consoleAppender.layout.ConversionPattern = %-4r [%t] %5p %c %x - %m - %X{userName}%n

    log4j.rootLogger = DEBUG, consoleAppender

```

I hope that code explains the concept of MDC. Do let me know if you have any questions/suggestions in the comments.

## Output from the log file:

```java

    0    [http-8084-2]  INFO Log4jMDCDemo  - This is  demo for the Log4j MDC concept - veera
    0    [http-8084-2]  INFO Log4jMDCDemo  - From Veerasundar.com/blog - veera
    0    [http-8084-2] DEBUG Log4jMDCDemo  - Just some sample messages - veera
```

Log4j MDC (Mapped Diagnostic Context) : Example code


When ever I code a complex logic in Java, I often wants to test a part of that complex code to check my logic correctness or to evaluate a code snippet. I usually do this, by creating a sample class named SandBox with a main method and placing whatever code that I wanted to test inside the main method. Then run the SandBox class. This solved my problem most of the times. But recently, I came to know that Eclipse has a elegant way of doing this in the name of Scrapbook Page.

So, **what is Scrapbook Page?** To put it simply, it's just a file where you can place your Java code snippet and execute it directly from the Scrapbook. No need to create any temperory classes (like I did in the previous para). You can even put one line of Java statement like System.out.println('Hello') in the Scrapbook and execute it. You'll get the 'ËœHello' printed on your console. Cool, Isn't it?

That said, I guess now you know the potential of Scrapbook. Let's see **how to use Scrapbook**. To add a scrapbook to your project, go to **File -> New -> Other -> Java -> Java Run/Debug -> Scrapbook page**. This will add a new file with an extension '.jpage'. In this file you can place any Java statements and you can select the Java statements, right click and either choose to:

- **Inspect **- which will show the return value of your statements in an popup box.
- **Display **- which will insert the return value of your statements to the Scrapbook itself.
- **Execute **- which will run your selected Java statements.

Apart from running Java statements, Scrapbook pages supports content assist also. So, when you type your code in Scrapbook, you'll get the Autosuggestions as well.

i hope, this information helps you to use Eclipse effectively for your Java development. Do let me know your thought's about this article.


[Eclipse Tip] How to use Scrapbook pages in Eclipse?


Recently I got a question from my blog reader _Kuruba_, regarding log4j logging. Kuruba is having a batch program with Log4j logging and he wants to send the log messages to a **new log file each time his batch runs**. This can be achieved by extending Log4j's FileAppender, which is used for [logging to a file][1], and adding our own customization to the file appender. Below I'm explaining how to do it.

[1]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-the-log-messages-to-a-file

## Extending FileAppender to create a new log file for each application run:

Here's the pseudo code for the logic we are going to implement.

1.  Create a new Class _NewLogForEachRunFileAppender_ (or any name as you wish), and extend it from the class _[org.apache.log4j.FileAppender][2]._
2.  Override the _[activateOptions][3]()_ function for setting the new log file name every time the logger is instantiated.
3.  For simplicity, we will append the _current timestamp_ to each log file name. So, each time when you run the application, you will get a fresh log file.

[2]: http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/FileAppender.html
[3]: http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/FileAppender.html#activateOptions()

## Customized FileAppender: NewLogForEachRunFileAppender:

Here is the code for the customize FileAppender, which will create a new log file, appender with the current timestamp, for each run of the application. Please note that this code is tested in Windows environment. So, please be cautious and do a testing when running this code in Unix or other environment.

```java

    package com.veerasundar.dynamiclogger;

    import java.io.File;
    import java.io.IOException;

    import org.apache.log4j.FileAppender;
    import org.apache.log4j.Layout;
    import org.apache.log4j.spi.ErrorCode;

    /**
    * This is a customized log4j appender, which will create a new file for every
    * run of the application.
    *
    * @author veera | https://veerasundar.com
    *
    */
    public class NewLogForEachRunFileAppender extends FileAppender {

    public NewLogForEachRunFileAppender() {
    }

    public NewLogForEachRunFileAppender(Layout layout, String filename,
    		boolean append, boolean bufferedIO, int bufferSize)
    		throws IOException {
    	super(layout, filename, append, bufferedIO, bufferSize);
    }

    public NewLogForEachRunFileAppender(Layout layout, String filename,
    		boolean append) throws IOException {
    	super(layout, filename, append);
    }

    public NewLogForEachRunFileAppender(Layout layout, String filename)
    		throws IOException {
    	super(layout, filename);
    }

    public void activateOptions() {
    if (fileName != null) {
    	try {
    		fileName = getNewLogFileName();
    		setFile(fileName, fileAppend, bufferedIO, bufferSize);
    	} catch (Exception e) {
    		errorHandler.error("Error while activating log options", e,
    				ErrorCode.FILE_OPEN_FAILURE);
    	}
    }
    }

    private String getNewLogFileName() {
    if (fileName != null) {
    	final String DOT = ".";
    	final String HIPHEN = "-";
    	final File logFile = new File(fileName);
    	final String fileName = logFile.getName();
    	String newFileName = "";

    	final int dotIndex = fileName.indexOf(DOT);
    	if (dotIndex != -1) {
    		// the file name has an extension. so, insert the time stamp
    		// between the file name and the extension
    		newFileName = fileName.substring(0, dotIndex)   HIPHEN
    				   System.currentTimeMillis()   DOT
    				  fileName.substring(dotIndex   1);
    	} else {
    		// the file name has no extension. So, just append the timestamp
    		// at the end.
    		newFileName = fileName   HIPHEN   System.currentTimeMillis();
    	}
    	return logFile.getParent()   File.separator   newFileName;
    }
    return null;
    }
    }

```

## log4j.properties file

Since we created a custom file appender, we need to tell the Log4j to use our custom file appender. For demo purpose, I configured this custom FileAppender as a rootLogger. So, all log messages will go to our file appender. Below is the sample log4j.properties file.

```java

    log4j.rootLogger = DEBUG, fileout
    log4j.appender.fileout = com.veerasundar.dynamiclogger.NewLogForEachRunFileAppender
    log4j.appender.fileout.layout.ConversionPattern = %d{ABSOLUTE} %5p %c - %m%n
    log4j.appender.fileout.layout = org.apache.log4j.PatternLayout
    log4j.appender.fileout.File = D:/temp/dynamiclogger/logs.log

```

If you look at the property *log4j.appender.fileout*, our customized file appender is associated with this appender. We have also given a log file name 'log.log' in the above configuration file. So, with the above configuration, when you run your application, the log files will be generated in this fashion: logs-1250696128437.log, logs-1250696142828.log.


How to create a new log file for each time the application runs?


In my last post about [how to send log messages to different log files][1], I'd promised to write about _additivity_. And, here is a post for keeping my promise. I hope that after reading my previous article, now you know how to [configure Log4j][2] for logging into multiple files using file appenders. But, there is a catch in that technique. To explain this clearly, consider this scenario:

[1]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-log-messages-to-different-log-files
[2]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-log-messages-to-different-log-files "configure log4j"

You've configured a total of _three appenders_ in your application. One for the package _com.demo.moduleone_ and one for _com.demo.moduletwo_ and one root logger for _com.demo_. The log4j configuration will look something like this (showing only the appender configuration, excluding other details)

```java
    log4j.category.com.demo.moduleone = INFO, moduleOneFileAppender
    log4j.category.com.demo.moduletwo = INFO, moduleTwoFileAppender
    log4j.rootLogger = INFO, rootFileAppender
```

The Log4j loggers are following hierarchies. ie, A log4j logger is said to be an _ancestor_ of another logger if its name followed by a dot is a prefix of the _descendant_ logger name. A log4j logger is said to be a _parent_ of a _child_ logger if there are no ancestors between itself and the descendant logger.

So, as per the hierarchy, our rootFileAppender is the _parent_ appender for both moduleOneFileAppender and moduleTwoAppender. So, all the log messages that are coming to the child appenders will be propagated to the parent appenders too. So, in our scenario, the log messages from the package _com.demo.moduleone_ will be sent to the _moduleOneFileAppender_ plus the *rootFileAppender*. The same applies to the _com.demo.moduletwo_ also. This leads to write the same log message in two different location.

## How to avoid this redundancy?

In order to avoid this redundancy, we can use **Log4j additivity**. Just set the _additivity_ property of an Log4j logger to **false** and then the log messages which are coming to that logger will **not** be propagated to it's parent loggers. So, our new Log4j configuration file would be:

```java
    log4j.category.com.demo.moduleone = INFO, moduleOneFileAppender
    log4j.additivity.com.demo.moduleone = false
    log4j.category.com.demo.moduletwo = INFO, moduleTwoFileAppender
    log4j.additivity.com.demo.moduletwo = false
    log4j.rootLogger = INFO, rootFileAppender

```

With the above configuration, the log messages from the _com.demo.moduleone_ will go to the moduleOneAppender only and the rest of the log messages will go to the rootFileAppender.

Previous: [How to send log messages to different log files?][3]

[3]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-log-messages-to-different-log-files


Log4j Tutorial: Additivity - what and why?


One of the common requirement in Java projects, that are [using Log4j logging][1], is to have different log files for each module (or layer) in the project. For example, if you have a web application, you may want to log the debug/info messages from the service layer to a _service.log_ file and the log messages from the presentation layer to the _web-app.log_ file and so on. This is very simple to achieve in Log4j.

[1]: https://veerasundar.com/blog/log4j-tutorial-adding-log4j-logging-to-your-project "How to add Log4j support to your project?  Follow these steps if you want to add Log4j logging support to your Java project."

Log4j has a concept called **Category** using which you can classify a package as a category and assign a appender to that category alone. To make this point clear, consider that we have the below Java classes in our project:

```java
    com.someapp.service.myservice.SomeServiceClass.java

    com.someapp.dao.SomeDaoClass.java
```


Now, if we want to send the log messages from SomeServiceClass.java to service.log and SomeDaoClass.java to dao.log files respectively, then the log4j configuration would be something like this:

```java
    log4j.category.com.someapp.service = INFO, serviceFileAppender
    log4j.category.com.someapp.dao = INFO, daoFileAppender
    log4j.rootLogger = INFO, defaultAppender
```

As you can see in above snippet, we are defining two categories for the *service* and *dao* packages and associating them with the appenders serviceFileAppender and daoFileAppender respectively. These two appender are just any file appenders configured somewhere in the same log4j.properties file. (Have a look at this article: [How to configure the File Appenders in Log4j][2]). So, all the log messages that coming from the classes which resides under the *com.someapp.service* package will go to the serviceFileAppender, which in turn will go to service.log. The same logic applies to dao.log also.

 [2]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-the-log-messages-to-a-file "how to create a FileAppender to log messages into a file, instead of console."

Apart from these two logs, we also defined the defaultAppender as the root logger. Means, the log messages from all the packages will go to defaultAppender, **including the service and dao log messages**. Yes! with the above configuration, the service and dao log messages will be there in two places. In their respective log appenders the defaultAppender.

But, there's a way to prevent this duplicate logging. Read my next post on **Additivity** to learn how.

Next: [Additivity: What and Why?][3]

 [3]: https://veerasundar.com/blog/log4j-tutorial-additivity-what-and-why "Article explains what is log4j additivity and how to use it."

Previous: [How to send the log messages to a File?][4]

 [4]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-the-log-messages-to-a-file "how to create a FileAppender to log messages into a file, instead of console.  Log4j FileAppender - exampe for Logging messages to a file"


Log4j Tutorial : How to send log messages to different log files?


In the previous post of the Log4j tutorial series, I wrote about the very basics of [adding Log4j logging to your project][1]. In this post, I'll explain how to create a File Appender to log messages into a file, instead of console.

[1]: https://veerasundar.com/blog/log4j-tutorial-adding-log4j-logging-to-your-project "how to incorporate the Log4j logging support to your project, in a step by step manner."

### Log4j File Appenders - example for Logging messages to a file:

In most cases, either _Rolling File Appender_ or _Daily Rolling File Appender_ classes are used in production scenarios for logging messages into a file. A _[Rolling File Appender][2]_ will send all the log messages to the configured file, until the file reaches a certain size. Once the log file reaches a maximum size, the current file will be backed up and a new log file will be created (thus the name Rolling File Appender). The _[Daily Rolling File Appender][3]_ is also similar to _Rolling File Appender_ except that the rolling happens at given frequency. Below is an example for using RollingFileAppender

[2]: http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/RollingFileAppender.html "RollingFileAppender extends FileAppender to backup the log files when they reach a certain size."
[3]: http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/DailyRollingFileAppender.html "DailyRollingFileAppender extends FileAppender so that the underlying file is rolled over at a user chosen frequency."

1.  Add Log4j logging support to your project. Read [this article ][1] for how to do it.
2.  In your log4j.properties file, add below lines.

```java
        log4j.appender.rollingFile=org.apache.log4j.RollingFileAppender
        log4j.appender.rollingFile.File=D:/myapp/mylog.log
        log4j.appender.rollingFile.MaxFileSize=2MB
        log4j.appender.rollingFile.MaxBackupIndex=2
        log4j.appender.rollingFile.layout = org.apache.log4j.PatternLayout
        log4j.appender.rollingFile.layout.ConversionPattern=%p %t %c - %m%n

```

3.  As you can see from the above log4j  configuration, we are creating a new log4j appender in the name of *rollingFile* and setting it's options. I guess most of the options are self explanatory. The *MaxBackupIndex* tells the log4j to keep a maximum of 2 backup files for the log mylog.log. If the log file is exceeding the *MaximumFileSize*, then the contents will be copied to a backup file and the logging will be added to a new empty mylog.log file. From the above configuration, there can be a maximum of 2 backup files can be created.
4.  Next we need to direct our logs to go into this log4j appender.

```java
        log4j.rootLogger = INFO, rollingFile
```

5.  That's it. From now on, when you log something from your Java class, the log message will go into the mylog.log file.

Next: [How to send log messages to different log files?][4]

 [4]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-log-messages-to-different-log-files "How to send log messages to different log files?"

Previous: [Adding Log4j logging to your project.][5]

 [5]: https://veerasundar.com/blog/log4j-tutorial-adding-log4j-logging-to-your-project "Log4j Tutorial : Adding Log4j logging to your project"


Log4j Tutorial : How to send the log messages to a File using Appender


If you are new to Log4j, here is a short description on what is it and why should we care about it:

> [Log4j][1] is a flexible logging library, an open source project from Apache. Using Log4j, we can replace the debugging print line statements, like _System.out.println('Value is ' someVariable),_ with a configurable logging statement like logger.debug('Value is ' someVariable). The advantage in using Log4j is, if you do not want to print the debugging print lines in production application, you can easily switch them off using Log4j configuration file (which we will see it how, shortly).

[1]: http://logging.apache.org/log4j/index.html "With log4j it is possible to enable logging at runtime without modifying the application binary. The log4j package is designed so that these statements can remain in shipped code without incurring a heavy performance cost. Logging behavior can be controlled by editing a configuration file, without touching the application binary."

### How to add Log4j logger support to your project?

1.  [Download the latest Log4j distribution][2] from Apache website (at the time of this article is written, the latest version of Log4j is 1.2) and put the _log4j-xxx.jar_ in your project class path. For Java web application, you can place the jar file in _WEB-INF/lib_ folder. For Java applications, you can place the jar in any folder, but remember to add the folder to your classpath.
2.  Next we need to configure the Log4j library to our requirements. Log4j reads its configurations from log4j.properties file (or log4j.xml) placed in the CLASSPATH. Every log4j.properties file defines the following three things, mainly:
    - an **Log4j Appender** - this is the class file which does the actual logging. It could be a simple Console appender which writes  the log messages to stdout (screen) or a file appender, which sends the log messages to a log file.
    - a **Layout** - is nothing but how the log message is formatted. This format is very simlar to C languages's _printf_ function formatting.
    - and a **Logger** - a logger ties the appender with the log messages that are coming from the Java application. Basically, a **logger** tells that the log messages from these packages should go to some **appender** which will log the message in the defined **layout.**
3.  Below is a sample log4j.properties for configuring the console appender for your project. In this properties file, we are first defining a Console appender and a layout pattern (refer this [complete documentation][3] to know what's the weired symbols in the conversion patterns means). Then we are mapping all the _DEBUG_ level log messages from the entire application to go into the consoleAppender, since we added the consoleAppender to the rootLogger.

    ```java

        #define the console appender
        log4j.appender.consoleAppender = org.apache.log4j.ConsoleAppender

        # now define the layout for the appender
        log4j.appender.consoleAppender.layout = org.apache.log4j.PatternLayout
        log4j.appender.consoleAppender.layout.ConversionPattern=%-4r [%t] %-5p %c %x - %m%n

        # now map our console appender as a root logger, means all log messages will go to this appender
        log4j.rootLogger = DEBUG, consoleAppender

    ```

4.  In any of your Java file, add the below lines, in order to start logging.

    ```java

        private static Logger logger = Logger.getLogger(MyclassName.class);
        logger.debug("this is a sample log message.");
    ```

5.  Now you are done. Run your application and you should be seeing the log messages coming in your console window.

Next: [How to send log messages to a file?][4]

[2]: http://logging.apache.org/log4j/1.2/download.html "Download Apache log4j 1.2.15"
[3]: http://logging.apache.org/log4j/1.2/apidocs/org/apache/log4j/PatternLayout.html "Class PatternLayout - A flexible layout configurable with pattern string."
[4]: https://veerasundar.com/blog/log4j-tutorial-how-to-send-the-log-messages-to-a-file "How to send log messages to a file"


#code (58)