If you need to access the URL parameters inside your React application, without using any external libraries such as React Router, then read on.

## URL or Query Params

URL parameters, also known as query parameters, are the key value pairs that are set as part of the URL. For example, in the URL `https://example.com?foo=bar&zoo=car` the variables `foo` and `zoo` are the parameters and `bar` and `car` are their respective values.

## Reading URL Params

We can use the built-in `URL` object to access the URL params in our react application.

```javascript
// https://example.com?foo=bar&zoo=car&moo
useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    console.log(params.get("foo")); // prints "bar"
    console.log(params.get("zoo")); // prints "car"
    console.log(params.get("moo")); // prints ""
    console.log(params.get("random")); // prints null
  }, []);
```

In the above code, we construct a new `URL` object by passing the current document's location. Then by using the `searchParams` property, we can access the query parameters. If any value is set for the given parameters, then a String representation of the value is returned. If no value is set, but the parameter is present in the URL, then an empty string is returned. If no parameters is found in the URL, then `null` is returned.

## Reading an array of values from URL params

When you set multiple values under a same name, then you can read them as an array. To do this, instead of `get` method, use `getAll` then you will get back an array.

```javascript
// https://example.com?foo=bar&foo=car&moo
  useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    console.log(params.getAll("foo")); // prints ['bar', 'car']
  }, []);
```

## Setting a URL param

You can use `URLSearchParams` interface to manipulate the URL parameter values and then use it to set the new values in the current URL. For example:

```javascript
  const sp = new URLSearchParams(document.location.search);
  sp.set(keyName, 'newValue');
  document.location.search = sp;
```

This will cause a page reload and when it reloads, the new page will have the URL param set.

## Creating a reusable React hook to read URL parameter

Let's extract these reading and updating query param logic as simple React hook, so it can be reused.

```jsx
import { useEffect, useState } from "react";

function useQueryParam(keyName) {
  const [value, setValue] = useState();
  useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    setValue(params.get(keyName));
  }, []);
  const setParamValue = (newValue) => {
    const sp = new URLSearchParams(document.location.search);
    sp.set(keyName, newValue);
    document.location.search = sp;
  };
  return [value, setParamValue];
}
```

And, here's how you will use the newly created React hook.

```jsx
import { useEffect, useState } from "react";
  export default function App() {
      const [foo, setFoo] = useQueryParam("foo");
      const [zoo] = useQueryParam("zoo");

      const handleClick = () => {
        setFoo(new Date().getTime());
      };

      return (
        <div className="App">
          <h1>Query Params: {foo} {zoo}</h1>
          <button onClick={handleClick}>Set</button>
        </div>
      );
}

```

How to get and set URL params in React application


While building the [landing page of Mindsaha](https://mindsaha.com), I needed a way to show a text using typewriter effect. Here is the final outcome.

[![React Typewriter effect](/img/typewriter-effect.gif)](https://mindsaha.com)

Here's how I approached the problem and implemented a solution.

## Designing a React Typewriter component

If you think about what a Typewriter component should do, it comes down to these points.

1. The component accepts a `text` prop.
2. It then displays the characters in the given `text` one by one in certain duration (i.e. 500ms). This simulates the typing effect.
3. Once the full text has been displayed, it waits for some time.
4. Finally, it clears the whole text, again one by one.

Once the text is cleared, the effect is done. The component then may switch to the next text or just repeat the whole process again.

With this initial design, let's get into the coding.

## Coding the Typewriter component in React

```jsx
import React, { useEffect, useState } from "react";

const TYPING_SPEED = 100;
const SHOW_TIME = 2000;
const DEL_SPEED = 25;

function TypeWriter({ text }) {
  const [display, setDisplay] = useState(" ");

  const [typing, setTyping] = useState(true);
  // type the characters one by one
  useEffect(() => {
    if (!text || !text.trim().length) return;
    let typingTimer;
    if (typing) {
      let idx = 0;
      typingTimer = setInterval(() => {
        if (idx <= text.length) {
          setDisplay(text.substring(0, idx));
          idx++;
        } else {
          // when all characters are typed, after SHOW_TIME set clear flag
          clearInterval(typingTimer);
          setTimeout(() => {
            setTyping(false);
            setClearing(true);
          }, SHOW_TIME);
        }
      }, TYPING_SPEED);
    }

    return () => {
      clearInterval(typingTimer);
    };
  }, [text, typing]);

  // clear the characters one by one
  const [clearing, setClearing] = useState(false);
  useEffect(() => {
    let clearTimer;
    if (clearing) {
      let idx = text.length - 1;
      clearTimer = setInterval(() => {
        if (idx >= 0) {
          setDisplay(text.substring(0, idx));
          idx--;
        } else {
          // when all characters cleared, reset and invoke the callback
          clearInterval(clearTimer);
          setClearing(false);
          setTyping(true);
        }
      }, DEL_SPEED);
    }
    return () => {
      if (clearTimer) {
        clearInterval(clearTimer);
      }
    };
  }, [clearing, text]);
  return <span>{display || text[0]}</span>;
}
export default TypeWriter;
```

## Typewriter text effect - Demo

Here is the demo of the above component. Feel free type in new text and animate.

<TypeHolder />

## Question to you?

What do you think about this implementation? If it is up to you, how would you go about it? Also, can you think of how the blinking cursor has been done, as seen in the [Mindsaha landing page](https://mindsaha.com)?


How to create Typewriter text effect in React


By this time, you might already know about [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). In short, they provide mechanism for animating transition between two DOM states. For example, if you want to smoothly transition from one page to another page, you can do so with view transitions API.

In the past, I had implemented [page transitions using React Transition Group](https://veerasundar.com/blog/how-to-animate-page-transition-in-react-using-styled-components/). It seemed little complex to understand, and it didn't work well with accessibility. Now that browsers provide an in-built API to do the page transitions, it's time to update.

There's a great example in Chrome for Developers page that shows [how to implement the view transitions API](https://developer.chrome.com/docs/web-platform/view-transitions). In this blog post, let me show you a simple implementation in my blog that uses Next.js.

## Before View Transitions

As you can see in the below GIF image, when I navigate to different pages in my blog, the browser loads the new page without anu smooth animation.

![page navigation without any transition](/img/before-transition.gif)

## After View Transitions

Let's take a look at the same page navigation, but this time with view transitions added. (_The animation is not smooth, because of GIF, but in browser it will be butter smooth.)_

![page navigation with view transitions](/img/after-transition.gif)

## View Transition Implementation in Next.js application

I use Next.js to build my blog. Next.js provides a `Link` component to render hyperlinks and navigate to the pages. We can wrap this `Link` component in our custom `LinkTransition` component that enables the view transition.

```jsx
// LinkTransition.jsx

import Link from "next/link";
import { useRouter } from "next/navigation";

function LinkTransition(props) {
  const router = useRouter();
  const handleClick = (e) => {
    if (!document.startViewTransition) {
      // browser does not support view transition. Continue the default behavior.
      return;
    } else {
      // browser supports view transition. Animate the transtion.
      e.preventDefault();
      document.startViewTransition(() => {
        router.push(props.href);
      });
    }
  };

  return (
    <Link onClick={handleClick} {...props}>
      {props.children}
    </Link>
  );
}
export default LinkTransition;
```

Once we have this component, you can use it in place of `Link` component to have the page navigation transitioned.

## Customizing the transition animation

By default, the view transition API just fades in / fades out the DOM elements. But you can customize the animation via CSS, by applying animations to `::view-transition-old` and `::view-transition-new` pseudo-elements. For example, here is a sliding animation, taken from [Chrome Web Developer page](https://developer.chrome.com/docs/web-platform/view-transitions).

```css
/* global.css */

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
```

## Conclusion

Implementing page transitions have never been this much easier - thanks to View Transition API. [Not all the browser supports](https://caniuse.com/mdn-api_viewtransition) it yet, but until they do, we can progressively enhance the user experience in browsers that do support it (Chrome / Edge).


Implementing view transitions in a Next JS application using React


When I was hosting this blog in my own VPS, I followed the URL pattern of **"/blog/yyyy/mm/blog-post"**, which worked quite well for my setup. But I decided to switch to a simpler URL pattern when I moved my blog to Firebase hosting.

I did not want the date part in the URL. Specifically, I wanted to host my blog pages under a simple URL of **"/blog/blog-post/"**.

It turns out that setting up this redirect is quite simple in Firebase. All I needed was to define the redirect rule in the `firebase.json` file and I am all set.

## Firebase hosting redirect rule to remove date from blog post URL

```json
{
  "hosting": {

    ... other configuration,

    "redirects": [
      {
        "regex": "/blog/\\d{4}/\\d{2}/(?P<post>.+)/",
        "destination": "/blog/:post",
        "type": 301
      }
    ]
  }
}
```
And that'd be it. This saved me from lots of 404s that I was seeing in my blog lately.

Redirecting blog URL without date in Firebase Hosting


In my React application, I needed a way to pass custom variables from my JavaScript code to my CSS code. For example, I want to do this:

```javascript
function DemoApp() {
  return <MyCustomButton marginTop={"10px"} />;
}
```

Then, `MyCustomButton` will need to set its margin top to `10px`. So, I need a mechanism to take the props values and pass it down to CSS and set it. Let's see how it's down. I am using [CSS Modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) in my React app, btw.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton() {
  return <button className={styles.button}></button>;
}
```

## Defining CSS variables

To use dynamic values in CSS, one approach is through [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). I can define a CSS variable as `--my-var: 10px` and then access it with `margin-top: var(--my-var);`. So for mt `MyCustomButton` component, I defined the required CSS variables first.

```css
/* my-custom-button.module.css */
.button {
  /* these variables will be used later to set from JavaScript */
  --marginTop: 0;
  --marginBottom: 0;

  margin-top: var(--marginTop);
  margin-bottom: var(--marginBottom);
}
```

Now that I have my CSS variables defined, next step is to set them.

## Setting CSS variables from React component

I can pass `style` object to JSX that react will apply to the underlying element. I need to construct this `style` object with all the variables that I want to set.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={{
        "--marginTop": props.marginTop,
        "--marginBottom": props.marginBottom,
      }}
    ></button>
  );
}
```

This way, I can pass in whatever the custom props to the underlying CSS variable.

## Using the utility method to construct the style object

Manually constructing the `style` object will not scale well if you have 10s of custom attributes. In such cases, we can write a simple function that construct the `style` object for us. We can also add any validation to the code.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";

/**
 *
 * @param props react props object with key, value pairs
 * @param variableNames array of names, for ex. ['marginTop', 'marginBottom']
 * @returns a object such as {"--marginTop": "10px", "--marginBottom": "10px"}
 */
function propsToCSSVariable(props, variableNames) {
  return variableNames.reduce((acc, key) => {
    if (props[key] !== undefined) {
      acc[`--${key}`] = props[key];
    }
    return acc;
  }, {});
}

const cssVariableNames = ["marginTop", "marginBottom"];
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={propsToCSSVariable(props, cssVariableNames)}
    ></button>
  );
}
```

With this approach, now I can completely customize my React components with JavaScript and CSS.

If you are following any other techniques, please do let me know.


Setting CSS variables from a React app

Let's say you want to add a tweet button to your blog, so your readers could reach out to you. You do not want to include the twitter SDK either, because of privacy concerns. How will you do it?

![an illustration of a person holding a mobile phone](https://i.imgur.com/zNnBop0.jpg)

That's exactly the question I had when I replaced Disqus with Twitter as a way of interacting with my readers - how to add the ability for the readers to type in a message and tweet me without having any Twitter JavaScript files? Here's how solved it.

## Twitter web intent API

Luckily, Twitter has exposed a public API [https://twitter.com/intent/tweet](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent) through which you can compose and post a tweet via a link. Which means, if you have a link on your page with `href` set to [https://twitter.com/intent/tweet?text=hello](https://twitter.com/intent/tweet?text=hello), when the user clicks on the link, it will take user to Twitter page with the text pre-populated. Go ahead, give it a try - don't worry, nothing will be posted on your timeline until you explicitly tweet.

Along with `text` you can also pre-configure `url`, `via` and other attributes to pre-fill the twitter message. Here's a full list of all allowed [tweet intent parameters](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent).

## No link and no JavaScript either

If you looked at the [Twitter Web Intent](https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview) overview page, they are asking to include teh twitter JavaScript files, which I don't want to do. I also don't want a pre-configured a link. Instead, I want a text box where the user could type in their message and then a tweet button.

![screenshot of a web form with a text box and a tweet button](https://i.imgur.com/rVMlNTU.png)

## Behold - the form

I am sure you would have heard about the `form` element - it was in the HTML 101. Honestly, after the web 2.0, I don't exactly remember when was the last time I meaningfully used a web form.

`Form` is the exact answer for my use case. The `form` element has an attribute called `action` - you can set a URL to the action attribute and then the contents of the form will be sent to the said URL. The default submission method of `form` is `GET` - which means the form values will be appended to the `action` URL as query parameters, which is what I want.

Now, all I have to do is to add a form, targeting Twitter web intent URL.

```jsx
<form action={"https://twitter.com/intent/tweet"}>
  <textarea
    placeholder={"type your message and click tweet button"}
    name="text"
  />
  <button type={"submit"}>Tweet To Author</button>
</form>
```

When the user type in a text and slick the submit button, the form will redirect the user to `https://twitter.com/intent/tweet?text=usermessage`. So far so good.

Next, if you wanted to pass in other parameters such as `url` or `via` or even a pre-configured `text` without user entering them - you can use `hidden` input elements.

```diff-jsx diff-highlight
  <form action={"https://twitter.com/intent/tweet"}>
+   
+   <input type={"hidden"} value={"vraa"} name="via" />

+   
+   <input type={"hidden"} value={postURL} name="url" />
    <textarea
      placeholder={"type your message and click tweet button"}
+      defaultValue={"Hey @vraa, "}
      name="text"
    />
    <button type={"submit"}>Tweet To Author</button>
  </form>
```

That'll do it - I now have a tweet button without including any Twitter JavaScript files!

Now why don't you try it out below? What do you think about this post, send me a tweet!

How to add Tweet button without JavaScript


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


Some time back, I built [Gauge Generator](https://veerasundar.com/gauge-generator/) as a weekend project. This app helps to create custom gauges and export them as SVGs to be used in a dashboard design projects. It was built using React framework and create-react-app tool.

[![Gauge Generator](https://camo.githubusercontent.com/af4950bea23bb576ecd36bb60a1a8cdf6414a1c3/68747470733a2f2f692e696d6775722e636f6d2f7664484a42464d2e706e67)](https://veerasundar.com/gauge-generator/)

Since it was a fun little weekend project, I did not spend much time on optimizing it. As the app now complete, I thought it's a good time to take another look at its performance and optimize it if necessary.

## Measuring React app performance

"If you can't measure it, you can't improve it". So, we need to first see where the issue is in order to fix it.

Measuring React app performace is not difficult. React uses [User timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to log performance metrics which we can easily look into via browser's developer tools.

Additionally, we can use [React Developer tools](https://github.com/facebook/react-devtools) _Higlight Updates_ feature to visually see which React components are rendered as the app state changes thus figuring out which components are rendered unnecessarily.

### 1. Finding wasted renders

First enable "Highlight Updates" in React Developer tools preference. Now interact with your app and you will see the components are highlighted.

![Highlight updates of React app](https://i.imgur.com/noeyRQe.gif)

In the above recording, you can see lots of boxes displayed around components as I increase the slider value. You can also notice that even though I only make change in one React component, it triggers updates in all other react components as well. Ideally, as I change Gauge value, I want only the Gauge and the Gauge value component to get updated, not the whole app.

### 2. Measuring wasted renders

Now we know that our app renders components unnecessarily, lets measure how much CPU cycles are getting wasted.

Open Chrome Dev tool's Performance tab and record the app as you increase the slider value. But before doing this, disable any React addons in the browser, as they may impact our measurements. Record the measurements for less than 10 seconds, else the Chrome might hang. For our case, recording for 3 seconds is more than enough. After the recording stopped, Chrome will open the detailed report (click to enlarge).

[![React app performance metrics](https://i.imgur.com/Os0VaVe.png)](https://i.imgur.com/Os0VaVe.png)

When you focus on one single render cycle, we can see that the component `InputColor` and `InputField` are getting updated and taking almost 90ms for each render cycle. This render is unnecessary and can be optimized.

## Optimizing the React app performance

Now we know where the bottleneck is. We need to avoid rendering components unless it is _really_ needed. In our case, the problem lies on these two components - `InputColor` and `InputField`. We can go about fixing these components in two ways.

1. Using `shouldComponentUpdate` method, you can determine if a component needs to be updated/rendered as its state/prop changes. You can manually compare React component's next state/props with currect state/props and return either `true` or `false` to let React know to update or not.
2. Or, by Using `PureComponent`, you can let React to do the shallow comparison of state/props values. This is a recommended approach as it saves us from doing manual comparison.

So, I updated both `InputColor` and `InputFields` components to extend from `PureComponent` instead of `Component`.

```javascript
import React, { PureComponent } from "react";

class InputColor extends PureComponent {
  /*  code here */
}

class InputField extends PureComponent {
  /*  code here */
}
```

Below is how the application rendered after making the above change. If you see, now there are no unnecessary renders as I slide the Gauge value. Only the top level components are re-rendered.

![using PureComponent of Reat helps improve performance](https://i.imgur.com/Dddziqp.gif)

Perfect! With a simple fix, we were able to reduce the number of rendered components to a minumum. To confirm the improvment, lets measure the metrics and see (click to enlarge).

[![React app improved performance metrics](https://i.imgur.com/fFn559t.png)](https://i.imgur.com/fFn559t.png)

If you compare the above results with the previous measurement, you can clearely see we have no calls to `InputColor` or `InputField` is made, thus saving around 90ms for each render cycle.

## Conclusion

In most cases, switching to use `PureComponent` or manually defining `shouldComponentUpdate` will always result in performance improvment. But you need to make sure that when a state changes, you don't mutate the object, but instead you always return a new object. This is because the `PureComponent` does a shallow comparision, so if you mutate a nested property, it won't be able to detect the change, hence it won't re-render your component. So, just be sure not to mutate state.

Apart from using `PureComponent`, breaking large component into small components and passing the state as props to them will also help in saving wasted renders. Just make sure you only pass the props that is specifically needed by the small components. This way, `PureComponent` will get to compare the prop change and avoid rendering if necessary.




```


Optimizing performance of a React app


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


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


Loading time is one of the key metric for any web application these days. There are several optimization techniques exist to help with reducing page load time. If you are using [Webpack](https://webpack.js.org/), you can make use of tools that come in-built to improve page loading time.

In this article, we are going to see how to do code splitting using webpack. Let's start!

## What we are building?

We are building an imaginary web application, with a landing page and button. When the user clicks on the button, we are going to load a dynamic form. In real word, this form could be your big application.

![Loading a dynamic form](https://i.imgur.com/eXVVswt.gif)

The problem here is, the form we are loading could be huge. We need to show this form only when the user clicks on the button.

But, Without code splitting, we are loading the entire bundle, even for the user's who may not even click the button. That's bad!

![Bundle size without optimization is huge](https://i.imgur.com/8qGUM9P.png)

So, let's optimize this: let's split landing page bundle and form bundle, and load the form bundle only when the user clicks on the button.

## Setting up Webpack

First, we need a project and a working webpack setup. To do this, run the below commands in one of your working directory.

```text
$ mkdir codepslit
$ cd codesplit
$ npm init
$ npm install lodash
$ npm install webpack webpack-dev-server -D
```

Once the dependencies are installed, open this project in any of your favorite IDE (I used IntelliJ). Now create folders `src` and `dist` that will be our source and output folders. Also, create a file named `webpack.config.js` in the root of your project. Finally, your structure will look something like this:

![Directory Structure](https://i.imgur.com/l5jQvHo.png)

Now, use the following webpack configuration to get our project built through webpack.

### webpack.config.js

```javascript
const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: 'dist'
    }
};
```

With this simple configuration, webpack takes the source files from `./src/index.js` and outputs them to `dist` folder. Now, lets create two files: `index.js` - our landing page and `form.js` - our dynamically loaded form.

### src/index.js

```javascript
// statically import form module.
import form from "./form";

window.onload = function () {
    let btn = document.getElementById('load');
    btn.addEventListener('click', function () {
        document.getElementById('form').appendChild(form.render());
    });
};
```

In our landing page, we are statically importing `form.js` on load itself and attaching an event to the button. When the button is clicked, we are rendering the form contents to our page (Note: for simplicity, I am using methods like `appendChild` to create dynamic elements on page. For production, you should consider frameworks such as React, Vue which are really good at UI construction).

### src/form.js

```javascript
import _ from "lodash";

export default {
    render: function () {
        let form = document.createElement('form');
        _.map(['Name', 'Email', 'Contact'], function (field) {
            let lbl = document.createElement('label');
            lbl.innerHTML = field;
            let txt = document.createElement('input');
            txt.type = 'text';
            let container = document.createElement('div');
            container.className = 'field';
            container.appendChild(lbl);
            container.appendChild(txt);
            form.appendChild(container);
        });
        return form;
    }
};
```

Our imaginary application `form.js` is very simple: It constructs three form fields dynamically and returns them. Again, don't use `appendChild` or `createElement` to construct dynamic UI in production code. Use any frameworks.

### dist/index.html

```html
<body>
    <div class="app-loader">
        <h1>User Registration Form</h1>
        <button id="load">Load Form</button>
    </div>
    <div id="form"></div>
    <script src="/bundle.js"></script>
</body>
```

Above is the HTML file that houses our application. For brevity, the style part is stripped out.

With all the above files created, the final directory structure will look like this:

![Final Directory Structure](https://i.imgur.com/AJUxx6x.png)

## Bundling our project

Now when you run `webpack`, you will webpack is emitting one single bundle that has both our `index.js` and `form.js`. And this single bundle weighs **545 KB** which is bad and webpack itself complains about it via the comment **[big]**.

![Pre bundle size](https://i.imgur.com/qk6VqMQ.png)

## Code splitting using Dynamic imports

Webpack supports dynamic imports via `import()`. With this, webpack will be able to dynamically load a bundle at run time. But in order to use this, we need to setup [babel](https://babeljs.io/) first, as dynamic imports syntax is not supported out of the box now. We also need [Syntax Dynamic Import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) babel plugin.

### 1. Install Babel and Configure webpack to use babel loader for JS files.

```text
npm install --save-dev babel-loader babel-core babel-plugin-syntax-dynamic-import
```

```javascript
/* add to webpack.config.js */
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}
```
### 2. Configure Babel to use Syntax Dynamic Import

Add a `.babelrc` file at the root of your project.

```javascript
{
  "plugins" : ["syntax-dynamic-import"]
}
```

Once you have babel setup, now it's time to setup webpack to use dynamic imports. To do this, let tell webpack to emit named chunks. Modify the `entry` and `output` options in `webpack.config.js` as below:

```javascript
entry: {
    index: "./src/index.js"
},
output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
},
```

And modify our landing page `index.js` to use dynamic imports instead of static import.

```javascript
window.onload = function () {
    let btn = document.getElementById('load');
    btn.addEventListener('click', function () {
        // dynamically import form module at run time.
        import(/* webpackChunkName: "form" */ './form').then(function (form) {
            document.getElementById('form').appendChild(form.default.render());
        });
    });
};
```

Notice that we have removed `import form from "./form.js"` line and moved it inside the event handler function of our button. We dynamically import this module via `import(/* webpackChunkName: "form" */ './form')` statement. This will return a `Promise` which will receive the dynamically loaded module as its param once its resolved. Inside the Promise callback, you can use the dynamically loaded module anyway you want.

> Note: You need to access your exported values from the dynamically loaded module as `module.default` (earlier, it was just `module`). Also, in `index.html`, load your modules as `/index.bundle.js`, instead of `/bundle.js`.

With this setup, now if you run `webpack`, you will see webpack generated two modules `index.bundle.js` and `form.bundle.js`.

![Code split bundles](https://i.imgur.com/GKmZFz9.png)

And, if you notice, now our landing page `index.bundle.js` size is only **6.14 KB**, which is a great reduction from the original size of **546 KB**. Since we will load only the `index.bundle.js` upon page load, our app will be very fast on the initial load. Hurrah!

To prove this, let's measure our app performance with [Lighthous](https://developers.google.com/web/tools/lighthouse/) for both pre and post optimization.

![Comparing page load time](https://i.imgur.com/M136MaD.png)

As you can see, with this simple setup, we are saving around **700ms** of page load time. Our site loads and become interactive faster, which is a win! 🎉


Webpack code splitting example


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


When I do the web development, my IDE and the browser windows occupies almost all my screen. I hardly have any space to keep my terminals that runs the webpack compilation script in background. So I keep these terminals either minimized or hidden.

My habit is to check if the webpack compiled my changes by constantly tabbing between IDE and terminals. But this is annoying and not effective.

So here's a little trick that I added to my webpack configuration that announces the compilation is done by saying 'done', thus saving me from constant tabbing.

Create a file named `webpack.announcer.plugin.js` in your project.

```javascript
/* webpack.announcer.plugin.js */
const exec = require('child_process').exec;
const voice = 'Agnes';
const message = 'done';
const doneSound = `say -v ${voice} "${message}"`; // MacOS.
// const doneSound = `echo ${message} | ptts`;  // windows.

function AnnouncerPlugin(options) {
   // customize.
}

AnnouncerPlugin.prototype.apply = (compiler) => {
    compiler.plugin('done', () => {
        exec(doneSound);
    });
};
module.exports = AnnouncerPlugin;
```

Include the above plugin in your webpack config (Eg; `webpack.dev.config.js`);

```javascript
/* webpack.dev.config.js */
let WebpackAnnouncerPlugin = require('./webpack.announcer.plugin.js');
module.exports = {
   /*  other configuration */
   plugins: [
       new WebpackAnnouncerPlugin()
   ]
}
```

done!
```


Webpack tip to play sound on successful compilation


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


Sometimes I may want to test my local code against remote site without actually deploying it. For example, [this blog](https://veerasundar.com/blog) uses a style sheet from the address [https://veerasundar.com/blog/css/v8-main.css](https://veerasundar.com/blog/css/v8-main.css). I may want to map this stylesheet to a local file so that I can see the local changes immediately in my blog without actually deploying to remote server. This helps me to debug without impacting production environment.

In order to do this, I use **Charles Proxy**. Let's see how its done.

## Enabling Map Local in Charles Proxy

1. First you need to download and install the [Charles Proxy](https://www.charlesproxy.com/). It's a paid software, but there's a trial version also available.
2. Once installed, open the Charles Proxy.
3. To enable Windows Proxy: `Proxy -> Windows Proxy`
4. To limit recording to specific website: `Proxy -> Recording Settings -> Include -> Add` and add the website that you are testing.

   ![Charles Proxy Recording Settings](http://i.imgur.com/Cr0lvUA.png)

   By default, Charles proxy records all the network traffic, which may be unnecessary. For our task, we are only interested in one specific website. So we are telling Charles Proxy to record only the traffic to the included sites as seen in above picture.

5. Once you have enabled Proxy and Recording, now go to a browser (Chrome) and open the website [https://veerasundar.com/blog](https://veerasundar.com/blog). Now you will see the network requests are logged in Charles Proxy's sidebar.
6. Expand `https://veerasundar.com` until you see the specific resource that you want to map. In my case, I want to map my CSS file. Right click on that file and select `Map Local`

   ![Charles Proxy Map Local](http://i.imgur.com/CkII3Dg.png)

   In the _Edit Mapping_ dialog, select a local file path in `Map to -> Local Path` setting and click `OK`.

7. Now when you refresh the site in browser, the CSS file alone will be served from your local file, while the rest of the site contents will be loaded from remote server.

## Removing Map Local in Charles Proxy

To remove a local mapping for a remote file in Charles Proxy, you need to

1. Go to `Tools -> Map Local`
2. Now you will see all the mapped files in the dialog.
   ![Charles Proxy Remove Map Local](http://i.imgur.com/TgbKr6T.png)
3. Just edit / remove any mapping.


Charles Proxy Map Local tool enables us to use local files as if they were part of remote server.

How to use Charles Proxy Map Local


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


Before you start reading this article, I'd suggest to take a look at the [Route Planner application](https://veerasundar.com/route-planner) to understand what I am talking about. This post explains the process/code behind the route planner JavaScript application. You can fork/star [the project in Github](https://github.com/vraa/route-planner) if you wish.

[![Route Planner](http://i.imgur.com/BwVt4y2.png?1)](https://veerasundar.com/route-planner)

Having [photography as a hobby](https://500px.com/vraa) makes me travel to places whenever I get a chance. When planning such trips, I needed a tool that assist me in analysing different routes. **Google Maps** is good, but it did not have the feature that I wanted. I.e. showing distance and time between individual destinations. Having a hammer called [React](http://facebook.github.io/react/), this problem really started looking like a nail to me.

I have been using React for a while at work. In short, **I love it**. For a couple of my other side projects, I was using [Backbone](http://backbonejs.org/), which was good. However, with the added knowledge of React, I was really looking for an opportunity to unleash its power :). So I decided to make a simple React application that uses the **Google Maps API and helps me to plan routes for my trip**.

## Laying the foundation - browserify and npm

It is very important to have a good build system and module framework to organize your code. As your project grows, you'll thank yourself for laying a good foundation in the beginning of your project. I decided to use [Grunt](http://gruntjs.com/) and [Browserify](http://browserify.org/) as by build system and bundler. Moreover, there's a JSX transform called [Reactify](https://www.npmjs.com/package/reactify) which makes it easy to use React and Browsrify together. With this, here's my `package.json` with all my project dependencies.

```json
{
    "name": "routeplanner",
    "version": "0.0.1",
    "description": "Google Maps Route Planner",
    "main": "index.js",
    "dependencies": {
        "backbone": "*",
        "underscore": "*",
        "react": "*",
        "react-backbone": "*",
        "react-mixin-manager": "*",
        "google-maps": "*",
        "domready": "*",
        "promise": "*",
        "classnames": "*",
        "vent": "*"
    },
    "devDependencies": {
        "grunt": "*",
        "browserify": "*",
        "grunt-browserify": "*",
        "grunt-cli": "*",
        "grunt-contrib-sass": "*",
        "grunt-contrib-cssmin": "*",
        "grunt-contrib-watch": "*",
        "grunt-contrib-connect": "*",
        "reactify": "*"
    },
    "scripts": {
        "dev": "watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js"
    },
    "author": "Veera"
}
```

I have also added `grunt-contrib-sass` and `grunt-contrib-connect` as my dev dependencies. These two helps in compiling my `.scss` files to `.css` and serving static files during development.

As you can see I have also added a **npm script** for auto compiling my project -
```
watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js
```

This script, when running, makes sure to take all the JavaScript files referenced from `src/js/index.js`, transform them from JSX to pure JavaScript and then bundle all of them together into `resources/js/routeplanner.js`.

## Grunt build system

After you have your dependencies defined in a `package.json`, next step is to create your build pipeline. For my project, all I needed is three simple tasks.

1. Watch all my `.scss` files for changes.
2. When they change, compile them into `.css` files.
3. A static web server for my development.

Here's my `Gruntfile.js` that include the above said tasks.

```javascript
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            options: {
                atBegin: true
            },
            sass: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass']
            }
        },
        sass: {
            dist: {
                files: {
                    'resources/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        connect: {
            server: {
                options: {
                    port: 8888,
                    keepalive: true
                }
            },
            keepalive: true
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

}
```

With the bundler and build system is in place, now its time to write the real code.

## The React application

**React** provides the **View** part of the **MVC** model. All it needs a DOM element to render the React component. You can design your application to be a React component that contains other sub components. That's exactly how I designed the route planner. A single `<Application/>` component that contains all my sub components such as `<Header/>`, `<Map/>` etc.

Here's a code snippet of my application.

### HTML Markup

```html
<div class="app" id="app"></div>
<script src="resources/js/routeplanner.js"></script>
```

### Render the React component into the DOM

```javascript
React.render(<Application />, document.getElementById('app'));
```

### The Application component

```javascript
var Application = React.createClass({
	render: function () {
        return (
            <div className='route-planner'>
                <Header/>
                <Map />
                <div className='panel'>
                    <RouteTabs />
                    <RoutePlan />
                </div>
            </div>
            );
});
```

With this structure, all you have to do is, create each components and define the `render()` method for each of them. For example, here's the `<Header/>` component.

```javascript
var Header = React.createClass({
    render: function () {
        return (
            <header>
                <h1><Route Planner</h1>
            </header>
            );
    }
});
```

## Handling the state

When designing a React application, it is very important to consider where you hold your application state. React suggests to have your components **stateless**. But if you want to have states, then hold the state as high as possible in the component hierarchy and pass it along to the child components as **props**. This way, there will be only one source of truth and data flow will be unidirection.

For my application, I decided to hold my state in the `<Application/>` component which is the top level component.

```javascript
var Application = React.createClass({
    getInitialState: function () {
        return {
            routes: this.load() || SeedData.routes,
            previousRoute: -1,
            activeRoute: 0,
            selectedPlace: null
        };
    },
    render: function () {
        var mapService = this.props.mapService,
            route = this.state.routes.at(this.state.activeRoute);
        return (

            <div className='route-planner'>
                <Header/>
                <Map mapService={mapService} route={route}/>
                <div className='panel'>
                    <RouteTabs
                    routes={this.state.routes}
                    active={this.state.activeRoute}
                    />
                    <RoutePlan
                    routeIndex={this.state.activeRoute}
                    fadeOut={this.state.hideActiveRoute}
                    />
                </div>
            </div>
            );
    }
});
```

The `getInitialState()` function returns the initial state of my application. Whenever there's some data changes, I have methods that update the `<Application/>` component's `state` object. When the state changes, React calls the `render()` method of the `<Application/>` component, inside which I pass the current state object to the child components.

## Conclusion

I believe I showed you the basic structure of the Route Planner application. If you'd like to see more code, feel free to fork [the route-planner project in Github](https://github.com/vraa/route-planner). If you have any questions or wants to know more about any piece of code in this project, please leave a comment.


Google Maps Route Planner using ReactJS


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


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


As a web developer, often I am in a need of quickly putting together a static website to try out ideas. My requirements are simple: create some html/css files in my project folder, hit the browser, and see my files rendered there.

Using an Apache / Nginx server for this menial task was an overkill. So, I have been using the simple one line server: `python -m SimpleHTTPServer` in Ubuntu/Mac. And, when I'm in Windows, [mongoose](http://cesanta.com/mongoose.shtml) was my go to tool to serve files from any folder.

But, lately, I have started using [Grunt](http://gruntjs.com/) for the same purpose. Apart from providing the tools for serving static files, grunt can also compile my less files to CSS and can do it as and when I make changes to the less files. Automation FTW!

So, here's the basic configuration that I'm following for my grunt setup so that you can also get started with grunt.

## Basic setup to server static files and auto compile less to CSS with Grunt

Before you start, you need to have **Node** installed in your system. Then follow the steps blow.

1. If you do not have a project folder already, you can get started by simply cloning this one: `git clone https://github.com/vraa/grunt-template.git`.
2. If you already have a project folder, just copy the `package.json` and `Gruntfile.js` files to your project's root folder.
3. Once you have project folder setup, in a command line, run `npm install` from your project root. This will install all the dependencies in a folder named _node_modules_.
4. Next, to start serving this folder content, run `grunt connect`. Then you can access this site using http://localhost:9090/
5. If you want to also compile less files automatically, just open a new terminal and run the command `grunt watch` from your project root. Keep the server running in another terminal. After this, as soon as you make changes your less files, it will be automatically combined into corresponding css files. viola!

## How does this work?

In order to put together this simple setup, we are using three grunt plugins.

1. grunt-contrib-connect : the server
2. grunt-contrib-less : the less compiler
3. grunt-contrib-watch : to auto compile less to css as soon as you make changes to it.

if you look at the `package.json` file, you can see that these dependencies are added along with the core `grunt` dependency.

### package.json

```javascript
{
  "name": "grunt-template",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-less": "^0.11.1",
    "grunt-contrib-watch": "~0.4.0"
  }
}
```

When you do `npm install`, node will download and install all the modules to your local *node_modules* folder.

Once you have all the dependencies ready, then you need to tell Grunt how to run these. This you can do via `Gruntfile.js`.

### Gruntfile.js
```javascript
module.exports = function(grunt){

	grunt.initConfig({
		less : {
			dist : {
				files : {
					'css/main.css' : 'css/main.less'
				}
			}
		},
		watch : {
			css : {
				files : '**/*.less',
				tasks : ['less']
			}
		},
		connect: {
			server : {
				options : {
					port : 9090,
					keepalive : true
				}
			},
			keepalive : true
		}
	});

	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-less');
};
```

As you can see in the above file, we are telling

1. *less* plugin to compile *css/main.less* file to *css/main.css* file.
2. *watch* plugin to monitor changes for any file that ends with *.less extension and when there are changes, run the task 'less' (which will compile less to css).
3. Finally, *connect* to start a server at port 9090 and server to any request. We also tell the server not to die and until we kill it.

With this simple setup, next time when I need a static website, all I have to do is:

1. git clone https://github.com/vraa/grunt-template.git
2. npm install
3. grunt watch (*in one terminal*)
4. grunt connect (*in a second terminal*)







```


Basic Setup to get started with grunt as a server and less compiler


I had some free time this week. So set out to build a simple board game in JavaScript to refresh my skills. For this, I chose one of my favorite board game which I used to play all the time when I was a kid. The game is called as **Brainvita (a.k.a 33 Hole Peg Solitaire)** and is a board puzzle.

The objective of the game is to remove the marbles that are there in the board according to the rules of the game. The more marbles your remove, the better.

Here's the screenshot of the game:

<a
  href="https://veerasundar.com/33holepegsolitaire/"
  title="Play Brainvita online game"
>
  <img
    src="https://farm8.staticflickr.com/7457/13378892875_8d72895eb8_c.jpg"
    width="800"
    height="416"
    alt="brainvita"
  />
</a>

You can [play Brainvita here](https://veerasundar.com/33holepegsolitaire/). The code is [open source](https://github.com/vraa/33holepeg).

Please give it a try and feel free to share your feedback.


Brainvita - 33 Hole Peg Solitaire Game in JavaScript


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


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


Closures are very important topic in JavaScript that you must understand if you want to master the language. The earlier you know about Closures, the better you will write your JavaScript code. But, from my experience, most of the JavaScript beginners either do not understand Closure or do not know that the existence of the topic at all.

So, in this post, I am trying to write down my understanding of Closures and their practical usages, in the hope that it will help some of you.

## What is a Closure?

So, what is it? As per the [definition](https://encrypted.google.com/search?hl=en&q=define%20closure "Define Closure")

> _Closure_ : A thing that closes or seals something

So, a closure is kind of a box with some contents in it.

<a
  href="http://www.flickr.com/photos/bryanalexander/3295316720/"
  title="Fenestra in a box by BryanAlexander, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3655/3295316720_e284d62308.jpg"
    width="500"
    height="430"
    alt="Fenestra in a box"
  />
</a>

Lets say, you have a cat and you placed it inside a box along with a bunch of balls and sealed it. So, now the box acts like a closure that closes the cat and the balls. The cat still has access to the balls and it can access them whenever it pleases to do so.

## JavaScript Closure

When it comes to JavaScript, instead of cats and balls, a Closure contains a function and all the variables that were in scope when the function got declared. Instead of cat, JavaScript places the function and instead of balls, it places all the variables that were in scope to that function.

<a
  href="http://www.flickr.com/photos/94921037@N05/9499522885/"
  title="JavaScript Closure by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3677/9499522885_525b651880.jpg"
    width="491"
    height="166"
    alt="JavaScript Closure"
  />
</a>

The important thing to note here is that the function that is inside the closure still has access to all the variables inside the closure. As long as the function exists, the variables inside closure will not get garbage collected, letting the function access them whenever it pleases do so.

## Coding the Closure

Enough with english. Let's see some JavaScript.

Consider the below code.

```javascript
function sayHello(){
  var message = "Hello"; // 1. Define a local variable.
  console.log(message); // 2. Prints Hello, as 'message' is still in scope.
}
sayHello();
```

As you'd expect, the code will print 'Hello' on the console. Now, let's tweak the code a little bit. Instead of printing the `message`, lets return a function that will print the message.

```javascript
function sayHello(){
  var message = "Hello"; // 1. Define a local variable.
  return function(){ // 2. Return a function from sayHello.
    console.log(message); // 4. Is 'message' still in scope?
  }
}
var helloSayer = sayHello();
helloSayer(); // 3. call the inner function returned from sayHello.
```

In the above,

1. We define a variable `message` that is local to the function `sayHello` and only accessible from it.
2. We declare a function and return it thus returning from `sayHello`. As common JavaScript knowledge goes, when we return from `sayHello`, all local variables inside that function will go out of scope and garbage collected. Will it happen to `message`? Let's see.
3. We call the inner function returned from `sayHello`.
4. Surprisingly, the code will strill prints 'Hello' and we can see that the inner function has access to the variable `message` even though we returned from the function. This is because of closure.

If we recall, in JavaScript, a closure will contain the function and the set of variables that were in scope when the function got declared.

In the above code, when we declare the inner function at line #2, JavaScript creates a closure and puts this function and the variable `message` (which is accessible to the function) in it. So, when the inner function getting called after we return from `sayHello` it still has access to the variable `message`.

That explains the basics of Closure. In my next post, I'll be covering some more [examples of closure](https://veerasundar.com/blog/javascript-closure-examples/). Feel free to comment if you have any feedback.
```


JavaScript Closures


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


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.



#web (32)