
I am using Electron Forge to build my Electron App [Mindsaha](https://mindsaha.com). Here's how I setup an automatic updates server for my desktop app, so that whenever I release a new version, users will be notified and updates will be installed automatically.

## Tech stack

This How-to assumes that:

- You have an Electron application setup already
- You are using [Electron Forge](https://www.electronforge.io/) to package your electron application
- You want to setup update server using [cloud object storage](https://www.electronjs.org/docs/latest/tutorial/updates#using-cloud-object-storage-serverless).

## 1. Setup Cloudflare storage

Cloudflare provides an [object storage service called R2](https://developers.cloudflare.com/r2/) allows developers to store large amounts of unstructured data. The good thing is that there's no charge for data transfer to internet, so you won't need to pay anything if users download your application.

1. Signup to Cloudflare and Create a R2 storage bucket names 'yourapp' (example only, you can use any name).
2. [Expose the bucket's content to internet](https://developers.cloudflare.com/r2/buckets/public-buckets/) via either custom domain (like get.yourapp.com) or a cloudflare managed sub-domain. I'd recommend use custom domains.
3. Create a folder called `updates` under your bucket. We will use this `updates` folder to store our electron update files.

## 2. Preparing release meta data

Now that we have our server setup, next step is to prepare the release files and meta data to store in the server. For mac updates, we need `RELEASES.json` file and for Windows we need `RELEASES` file. When user launches your electron app, the updater code will fetch these two files based on the platform and determine if there's a new version available or not.

### Creating Mac RELEASES.json file

When you run `npm run make`, on macOs, there won't be any `RELEASES.json` file be created. So, I came up with a small script that creates the JSON file for me. I created this file under the `PROJECT_ROOT/scripts/releaseJson.js` path.

```javascript
// PROJECT_ROOT/scripts/releaseJson.js

var pjson = require("../package.json");
var path = require("node:path");
var fs = require("node:fs");

// run only in mac
if (process.platform !== "darwin") return;

const { platform, arch } = process;

const releaseVersion = pjson.version;
const outPath = path.resolve("out");
const releaseJsonPath = path.join(
  outPath,
  "make",
  "zip",
  platform,
  arch,
  "RELEASES.json",
);

const releaseMeta = {
  currentRelease: releaseVersion,
  releases: [
    {
      version: releaseVersion,
      updateTo: {
        version: releaseVersion,
        pub_date: new Date().toISOString(),
        notes: "Features and bug fixes",
        name: releaseVersion,
        url: `https://get.yourapp.com/updates/${platform}/${arch}/yourapp-${platform}-${arch}-${releaseVersion}.zip`,
      },
    },
  ],
};

fs.writeFileSync(releaseJsonPath, JSON.stringify(releaseMeta), { flag: "w+" });
```

Take a note at the `url` property - here you should correctly mention the public URL of your cloudflare R2 bucket and the `updates` folder you created in the previous step. Next update the `package.json` to call this script during make step `"make": "npm run clean && electron-forge make && node scripts/releaseJson.js"`. Here's a sample output.

```json
{
  "currentRelease": "1.18.0",
  "releases": [
    {
      "version": "1.18.0",
      "updateTo": {
        "version": "1.18.0",
        "pub_date": "2025-05-17T05:38:11.951Z",
        "notes": "Features and bug fixes",
        "name": "1.18.0",
        "url": "https://get.yourapp.com/updates/darwin/arm64/yourapp-darwin-arm64-1.18.0.zip"
      }
    }
  ]
}
```

### Creating Windows RELEASES file

For Windows, we do not need any extra script, as the `make` itself creates the RELEASES file properly. Here's the sample file for Windows

```text
1B0863D5C31C795C2EADA94DE21D994D1A810AAC yourapp-1.18.0-full.nupkg 119179484
```

So finally our release files structure should look like this.

```text
yourapp
└── out
    └── make
        ├── zip
        │   └── darwin
        │       └── arm64
        │           ├── yourapp-darwin-arm64-1.18.0.zip
        │           └── RELEASES.json
        └── squirrel.windows
            └── win32
                └── x64
                    ├── yourapp-1.18.0 Setup.exe
                    ├── yourapp-1.18.0-full.nupkg
                    └── RELEASES
```
## 3. Uploading release artifacts to Cloudflare bucket

Once you have built the release files, you need to transfer the generated files to the Cluodflare R2 bucket. You can either do this step manually or automate this via script. For my purpose, I have been transferring files manually so far. May be in near future, I will update this section once I automate the file copy to R2 bucket.

## 4. Configuring Electron app to look for updates

Now that you have your release server ready, next step is to instruct your electron app to look in this server for any updates. You do this by placing this piece of code anywhere in your `main.js` file.

```javascript
const { updateElectronApp, UpdateSourceType } = require('update-electron-app');
const logger = require('electron-log');

// other code
updateElectronApp({
  updateSource: {
    type: UpdateSourceType.StaticStorage,
    baseUrl: `https://get.yourapp.com/updates/${process.platform}/${process.arch}`
  },
  logger
});
```

Ensure that the `baseUrl` property has the corrent public URL of your Cloudflare R2 bucket and the directory structure matches the one you have in your bucket.

With this setup, whenever you upload a new version of your app to Cloudflare bucket, user's will be notified about an when they open the app and update will be automatically downloaded and installed.

How to setup Automatic updates for Electron apps using Forge and Cloudflare

I've been working on adding new features to Gauge Generator for a while now. The version 2 of the product is now [live](https://veerasundar.com/gauge-generator).

[![Gauge Generator](https://veerasundar.com/gauge-generator/gauge.png)](https://veerasundar.com/gauge-generator)

I have added support for semi circle, arc shapes along with the circle shape. Now, a label can also be added next to the Gauge. User can pick a gauge from the template gallery and then customize them as per their wish.

Once the gauge is done, user can either copy the image to clipboard, download as an PNG file or view/copy the SVG source code that they can use in their design tools.

Happy Gauging!


Launched Version 2 of Gauge Generator


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

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

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

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

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

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

## 2. Call a function using `call`

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

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

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

## 3. Call a function using `apply`

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

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

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

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

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

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

Handy, isn't it?

How to call a JavaScript function

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


I recently uploaded a video in my Youtube channel about Javascript debugging. In this blog post, I am sharing the important points from that video.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/GymFDSc3mhc?si=PFoUFO3HQnxhLQw5"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowFullScreen
></iframe>

## Using console

We all have used `console.log` for printing debug messages to the console. Along with `log` method, `console` also supports following methods:

- console.debug
- console.warn
- console.error
- console.info

![debug message levels](/img/jsdebug-levels.png)

When you classify your debug messages using one of the above methods, you can easily spot them on the console (when there are ton of debug messages). Also, you can toggle to show only certain level of debug messages.

## Using debugger

If you want to pause the program at some line, you can use `debugger` statement. At runtime, the browser will stop at the `debugger` line and will let you inspect the call stack and variable values at scope. You can modify a value directly from the console and resume the program execution. This will be really helpful when you quickly want to change a variable value and see how it effects the program flow.

## Using breakpoints

The `console.log` and `debugger` tools are simple. But the drawback is that the source code needs to be modified. In most cases you do not want debugger messages ending up at production. So, it's better to separate break points from the underlying source code.

![breakpoints](/img/jsdebug-breakpoints.png)

There are three types of breakpoints.

1. breakpoint - stops the program execution whenever the control flow reaches it.
2. conditional breakpoint - stops the program execution only when a certain conditions, defined by you, are true.
3. logpoint - does not stop the program execution, but prints out the message given by you when control flow reaches.

## Using exception handling

For the case when you need to debug when some part of your code throws an error, make use of "Pause on uncaught exceptions" setting under Breakpoints section. Checking this option will tell the browser to pause at the code that throws an error object that isn't handled anywhere in the code.

![exceptions debugging](/img/jsdebug-exceptions.png)

If the error is handled somewhere, but you still want to pause the program execution when the error is thrown, check the option "Pause on caught exceptions".

## Using DOM and XHR breakpoints

![dom and xhr debugging](/img/jsdebug-domxhr.png)

When a DOM element is modified, and you want to know which code mutates the DOM element, you can enable a breakpoint that pauses just before the mutation happens and places the focus on the code line that initiated the mutation. This is really helpful when a third party library modifies the DOM and you need to which code does it. You can break on

- subtree modifications - where the child nodes are modified
- attribute modifications - where the attributes such as classname, id is changed
- node removal

Just right-click on the DOM element in the _Elements_ panel and you will see the option "Break on" to set these breakpoints.

Similarly, you can add a XHR breakpoints that will pause the program execution when a network request is made to the given URL.

## Conclusion

These are some of my goto tools and techniques for JavaScript debugging. What are your tips? Feel free to share in comments.


JavaScript debugging - tips and tricks


Recently, I had a requirement to create lines using SVG for my [home page](https://veerasundar.com) design. I couldn't hard code all the SVG line elements in my JSX since the number of lines were dynamic and I needed to do some positioning logic as well.

## Failed code

So I ended up with a simple `useEffect` code that runs once after everything renders and append the SVG lines.

```jsx
useEffect( () => {
  const svgElm = document.querySelector("#svgHolder");
  const lineElm = document.createElement("line");
  lineElm.setAttribute("x1", "20");
  // ... set other attributes
  svgElm.appendChild(lineElm);
}, []); // run once
```

The above code added the `line` tags to the `svg` element. However, it did not render anything at all on screen. The nodes were present in DOM, but nothing shows up on screen.

## document.createElementNS

It turns out I need to create the `line` element under a specified name space using the DOM API `document.craateElementNS`. SO once I change `document.createElement` with `document.createElementNS` and the right namespace, my SVGs were rendering properly.

```jsx
useEffect(() => {
  const svgElm = document.querySelector("#svgHolder");

  /* use proper namespace to create line element */
	const lineElm = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line",
        );

  lineElm.setAttribute("x1", "20");
  svgElm.appendChild(lineElm);
}, []);
```

How to create SVGs programmatically in React


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


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

The problem is the **processing time**.

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

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

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

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

## fork()

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

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

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

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

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

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


Using Node fork() to speed up processing time


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

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

## What the hook?

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

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

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

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

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

## React class component with State

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

For brevity, I omitted some code of this class.

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

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

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

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

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

## useState hook

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

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

### Refactoring state

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

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

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

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

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

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

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

## Putting it all together

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

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

No more classes! yay!!

## Hey, what about the performance?

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

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

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

For example,

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

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

## Conclusion

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


Rewriting a React Component using Hooks and React.Memo


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


Let's say you have a JavaScript web app, built by Webpack, in which you have some hard coded API keys (for example Firebase, Google Maps etc). Now, you want to avoid hardcoding the API keys (as a good developer that you are) and at the same time provide different set of API keys for each enviornment - dev, QA, production, etc.

If you have a backend, serving your app, then it's pretty trivial to accomplish. But, what if you do not have a backend, and you serve your JavaScript app as a static asset by Nginx? How will you achieve the separation of API keys?

Then you do it during the **build time**. You need to build your app, passing API keys (or whatever values that you need to be injected) as parameters to the build pipeline and have them replaced at the right places.

## Injecting values during build

With Webpack, you can do this with the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). You can define arbitrary key value pairs with this plugin configuration and read this in your templates. The plugin will take care of replacing the correct value during build time.

For example, Lets look at the below `webpack.config.js`:

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // other webpack configuration
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/view/index.html',
      apiKeys: {
        google: 'GOOGLE_API_KEY',
        firebase: 'FIREBAE_API_KEY'
      }
    })
  ]
};
```

In the `HtmlWebpackPlugin` configuration, along with plugin options, we have also defined our own key value pairs `apiKeys`. Then in your template file, `index.html`, you can access this value as `htmlWebpackPlugin.options.YOUR_KEY_NAME`. For example,

```html
<!doctype html>
<html>
  <head>
    ...
    <script type="text/javascript">
      <script type="text/javascript">
      window.RESOURCES = {
        GOOGLE_API_KEY: "<%= htmlWebpackPlugin.options.apiKeys.google %>",
        FIREBAE_API_KEY: "<%= htmlWebpackPlugin.options.apiKeys.firebase %>",
      };
    </script>
    </script>
    ...
  </head>
  ...
</html>
```

In the above example, I read the build time values and set them into `window` scope so that I can access it anywhere in my script.

## Providing environment specific values to build pipeline

With above setup, we moved the hardcoded API keys from code layer to build layer. But the values are still hardcoded. How can we avoid that?

By setting the values as Environment variables and letting node read and supply it to us with `process.env`. Let's change our `HtmlWebpackPlugin` configuration a little bit:

```javascript
plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/view/index.html',
      apiKeys: {
        google: process.env.GOOGLE_API_KEY,
        firebase: process.env.FIREBASE_API_KEY
      }
    })
  ]
```

With this, all you have to do is to set the correct environment variables in the machine, thus completely avoiding the hardcoded values in our code base.

If you want to supply different API keys for different environments, you can either pass in the values in command line when you invoke the build script or if you have a CI pipeline, define the environment values in the prod / dev build jobs.

As an alternative to setting up environment variables, you can also use the module [dotenv](https://www.npmjs.com/package/dotenv) to define the variables as a dot file in your project's root folder. But remeber NOT to commit the dot file in Git, as it allows each system to supply it's own environment variables.

So, that's it. What do you think about this approach? Please let me know in the comment section.


How to inject environment values in JavaScript app with Webpack


While building the next version of [RoutePlanGo](https://routeplango.com), I needed a way to animate the page transition when the user navigates to different URLs in the app. [RoutePlanGo](https://routeplango.com) is built using React and Styled Components and uses React Router for URL handling. This article explains how to use the React Transition Group to implement the page transition animation in the app.

## What are we building?

Here's the example of page transition animation that we are building. This example app has Home page and Details page. When the user goes to details page, it slides in the page and updates the URL. And, when the user goes back, it slides out the details page and slides in the home page for a smooth UI experience.

![Page Transition](https://i.imgur.com/Refk1JQ.gif)

You can see the code and the example live in here: [https://codesandbox.io/s/lrxmv7304l/](https://codesandbox.io/s/lrxmv7304l)

## 1. Setting up the application

For this example, we need to have a react application. You can either use "create-react-app" in your local, or use [Code Sandbox](https://codesandbox.io/s/new) in the cloud to setup a simple react application.

Once you have the react app, please install the following modules:

```shell
# to handle CSS styles
npm install styled-components --save
# to handle URL routing
npm install react-router-dom --save
# to apply animation on component transition
npm install react-transition-group --save
```

Our demo app has these components: **App**, starting point and handles route transition between pages, **HomePage** and **DetailsPage** to demonstrate the individual pages.

### App component

This is the starting point of our app and contains the page transition logic. Since, this component sits at the top level and hosts the individual pages, it makes sense to keep the page transition logic in here.

```javascript
// Styled component to host the app.
const PageContainer = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #e3f2fd;
  font-family: "Open Sans", sans-serif;
`;

// Starting point of our app
function App() {
  return (
    <Router>
      <Route
        render={({ location }) => {
          return (
            <PageContainer>
              <TransitionGroup component={null}>
                <CSSTransition
                  timeout={300}
                  classNames="page"
                  key={location.key}
                >
                  <Switch location={location}>
                    <Route exact path="/details" component={DetailsPage} />
                    <Route exact path="/" component={HomePage} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
            </PageContainer>
          );
        }}
      />
    </Router>
  );
}
```

The App component is a pretty standard React component that uses React Router to navigate to different components based on the matching URL. But the important section in the `TransitionGroup` and `CSSTransition`. Note, how we wrap the individual routes within these two higher order components.

The `TransitionGroup` and `CSSTransition` tracks the underlying components life cycles (mounting and un-mounting) and applies the given class name (in this case, `page`), suffixing the current transition state name. We can use this class name to define our transition animations.

For example, when the `HomePage` is mounted, it will have the class name `page-enter` added to it. Similarly, when it is getting unmounted (for example, when the user navigates to `DetailsPage`), it will have `page-exit` class name applied and the `DetailsPage` will have `page-enter` added to its class list.

### HomePage component

`HomePage` contains some text and a link to navigate to `DetailsPage`.

```javascript

// animation to slide in the home page from left
const slideInLeft = keyframes`
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
`;

// animation to slide out the home page to the left
const slideOutLeft = keyframes`
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
`;

const Page = styled.div``;

// apply the correct animation based on the transition state class name.
const HomePageElm = styled(Page)`
  &.page-enter {
    animation: ${slideInLeft} 0.2s forwards;
  }
  &.page-exit {
    animation: ${slideOutLeft} 0.2s forwards;
  }
`;

function HomePage() {
  return (
    <HomePageElm>
      <h2>Home Page</h2>
      <Link to="/details">Go to Page Two →</Link>
    </HomePageElm>
  );
}
```

Again, the `HomePage` component is pretty standard React component. But look at how we define the animations and apply the animation on the component level based the transition state class names. Especially,

```javascript
const HomePageElm = styled(Page)`
  &.page-enter {
    animation: ${slideInLeft} 0.2s forwards;
  }
  &.page-exit {
    animation: ${slideOutLeft} 0.2s forwards;
  }
`;
```

Also, make sure that your animation timings is less than or equal to the `timeout` prop of `CSSTransition` component. If it doesn't match, your animation may look janky. Play around with these timings to have a smooth animation.

The same logic applies to the `DetailsPage` component as well. We just need to replace the correct animations. You can view this example and the complete code in live here: [https://codesandbox.io/s/lrxmv7304l](https://codesandbox.io/s/lrxmv7304l)


How to animate page transition in React using styled components


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

## 1. Creating and setting up a React application

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

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

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

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

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

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

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

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

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

Now, let's install it in Chrome.

## 3. Adding React app extension to Chrome

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

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

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

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

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

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

## 4. Making changes and debugging the extension

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

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

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

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

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

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

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

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

Let's do this.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to create a Chrome extension in React JS


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

## Mars Rover problem:

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

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

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

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

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

### INPUT:

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

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

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

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

### OUTPUT:

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

INPUT AND OUTPUT

Test Input:

5 5  
1 2 N  
LMLMLMLMM

Expected Output:
1 3 N

## Mars Rover implemented in JavaScript / React

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


Mars Rover in JavaScript, React


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

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

## Animate the Gitflow

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

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

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


Gitflow - Animated


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


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


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

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

## 1. A compact string comparision

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

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

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

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

## 2. !!

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

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

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

## 3. Conditional function call

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

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

Here's an alternative, short approach:

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

yay!

## 4. Chaining of function calls

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

So, you go for `if`, obviously.

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

But let's rewrite with this one:

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

## 5. IIFE

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

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

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

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


5 nifty JavaScript tricks that you may not know


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

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

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


Convert a namespaced string, value pair to an JavaScript object


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


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

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

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

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

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

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

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

```javascript
(function($){

  $.fn.onSelect = function(callback){

    return this.each(function(){

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

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

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

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

    });

  };

}(jQuery));
```

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

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

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

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

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



```


onSelect - JQuery Plugin


Recently, I was bitten by a IE bug.

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

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

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

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

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

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

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

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

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

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

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

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


IE8 and Triggering event on hidden submit button


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

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

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

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

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

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

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

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

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

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

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

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


Parent Views and Child views in Backbone


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

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

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

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

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

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

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

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

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

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

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

The JavaScript code will be:

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

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

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

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

});

var DocumentView = Backbone.View.extend({

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

});

var SidebarView = Backbone.View.extend({

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

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

});
```

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

So, I looked at the second approach.

## 2. Using an EventBus to communicate between views

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

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

The JavaScript code for this appraoch will be:

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

  initialize : function(){

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

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

  },

});

var DocumentView = Backbone.View.extend({

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

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

});

var SidebarView = Backbone.View.extend({

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

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

});
```

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

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

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

## 3. Using Backbone as the event bus

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

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

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

The JavaScript implementation will be:

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

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

});

var DocumentView = Backbone.View.extend({

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

});

var SidebarView = Backbone.View.extend({

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

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

});
```

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

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



Communicating between views in Backbone


Raphael, the SVG JavaScript library, does not support require JS (yet). When loaded via `require('raphael')`, the code breaks throwing `'eve is not defined'` error in the console. There is a year long [issue thread][1] going on regarding this issue, but still there is no official fix yet.

[1]: https://github.com/DmitryBaranovskiy/raphael/issues/524 "raphael breaks if loaded via require-js."

Anyway, in the same thread, people started providing patches that fix this issue (for time being). And in one of the project, I saw the Raphael source code split into different files and converted to CommonJS module pattern.

I took the liberty to extract only the raphael-js modules and put them together in this Github repo: [https://github.com/vraa/raphael-require][2]

[2]: https://github.com/vraa/raphael-require "raphael-js source split into modules so that it can be loaded via require-js"

So, if you have a need, please feel free to use the above repo and let me know if you face any issues.


Loading Raphael JS via require JS


Underscore library comes with the [uniqueId()][1] function that generates globally unique IDs to use in code. But it was not enough for my [Backbone][2] models as I needed the IDs to be unique across  invocations and users, i.e. something like [UUID][3].

[1]: http://underscorejs.org/#uniqueId "UniqueId function to generate globally unique IDs"
[2]: https://veerasundar.com/blog/backbone-js-hello-world-tutorial "Backbone JS Hello World"
[3]: http://en.wikipedia.org/wiki/Universally_unique_identifier "Universally unique identifier"

I have been using [this code snippet][4] to generate pseudo unique IDs for sometime. Since it's a utility function and it made lots of sense to move it to Underscore itself. Here's how I did it.

[4]: http://stackoverflow.com/a/2117523/42372 "guid in JavaScript"

```javascript
  _.mixin({
      guid : function(){
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
          return v.toString(16);
        });
      }
    });
```

Once the above code is in place, then creating a unique ID is as simple as calling *_.guid()*.
```


Underscore.js and guid function


Day one of [JSFoo][1] is just got over. Went to the event with lot of expectations and came back with some new ideas/topics to explore. Here's a summary of what I learnt from today's sessions.

[1]: http://jsfoo.in

Except the keynote, rest of the sessions simultaneously happened in [two tracks][2]. So, I had to opt for one session while missing the other one. Anyway, the organizers seems to be recording the whole event. So, I hope I can catch up with the sessions I missed later in video format.

[2]: http://jsfoo.in/2012/#schedule

The first session I chose was '**Scaling node at Errorception**' by [Errorception][3] founder, [Rakesh Pai][4]. As I'm exploring node for my own web app, its very obvious for me to go for this. The speaker talked about how he's running Errorception on Node Mongodb stack. The highlights from his speech was:

[3]: http://errorception.com/ "Errorception"
[4]: http://blog.rakeshpai.me/ "Rakesh Pai"

1.  Don't write monolithic app. Instead break them into several micro apps (front end, queue processor, etc). This helps you to maintain it without much pain and deploy/take down the apps without affecting each other.
2.  Build a Queue layer for inter-app communication. That way, even if you take down a app, the messages won't be lost and they'll just be there in the queue until your app pick them up. He seems to be using **redis **for this purpose at Errorception.
3.  CPU bound app? Run away from node.

Then there was a 30 minutes of Q/A session about '**Web Storage**'. The presenter talked about different options for storing data locally at browser. It was new information to me that developers (ab)used the **window.name **property in order to persist data. This hack is totally an insecure way to preserve data and should never be considered for anything secure.

After a delicious lunch (I always complain about food in Bangalore, so when I say delicious, it is DELICIOUS!), I sit there in the '**Create JS**' session by [Harish Sivaramakrishnan][5].\*\* \*\*He totally inspired the audience by building a game from scratch in 45 minutes using [CreateJS][6] library. This library lets you to draw objects on Canvas instead of directly manipulating pixels by hand. A totally cool JS lib and if you are into game/visual programming using Canvas, you shouldn't miss this one.

[5]: http://hsivaram.com/
[6]: http://www.createjs.com/#!/CreateJS

The final sessions I attended were about using JQuery Deferred instead of inner-nesting callbacks and I18N Wikimedia libraries. Both provided some good information which I'll be using in my next projects.

Final session of the day was from Rakesh Pai who demoed his project of Controlling a toy car using Node server. He'd integrated the toy car with the Raspberry pi computer and ran the node server in it. A cool hardware hack, received great appreciation from the crowd.

With that the first day got over.


Day one of JSFoo


So, tell me, how many times have you annoyed with very long pages (such as this blog) and wished for a single click way to jump to top of the page!? If your answer is *many, *then this tip might give you some relief - **add a bookmarklet to your bookmarks toolbar that jumps to the top of the page for you.**

Here's the dead simple way to do it. Just drag this link to your bookmarks toolbar: [^][1]

[1]: javascript:window.scrollTo(0,0);

Here are the manual steps:

1.  Add a new bookmark.
2.  In the *name *field, enter either ^ or UP or \*whatever\*!
3.  In the location/URL field, enter: _javascript:window.scrollTo(0,0);_
4.  Save it.

Happy jumping around!


Scroll to top - JavaScript bookmarklet


Often I need to pull some content out of web pages. Of course, I can always do a simple _Ctrl C_. But many times, I want the scrapped content to be in a different format than it's already in. So, I used to write Java code that downloads the content and do some XML parsing and then converts it into the format I want. But, this became a tedious process soon.

So, these days I figured out another easy way to do the web scraping. JQuery!

IMO, JQuery is the best tool to do the DOM parsing and content extraction. Of course, that's why the JQuery library is built for.

But the problem here is, not all websites include JQuery with them and even if they do, you can't just go and execute your JavaScript code in amother person's website.

Thanks to Scratchpad from Firefox which solves the above problem. Starting last August, Firefox comes with a built-in webdev tool - [Scratchpad][1] that enables you to execute your own JavaScript code in the context of any website.

[1]: http://blog.mozilla.com/devtools/2011/08/15/introducing-scratchpad/ "Introducing Scratchpad"

So, this is what I do to scrape any public content from any web page:

1.  Open the page in Firefox.
2.  Press **Shift F4 **or go to **Firefox menu->Web developer->Scratchpad** to open the JavaScript editor.
3.  Include the below lines to add JQuery library to the current page ([thanks to this page][2]).
  ```javascript
      var GM_JQ = document.createElement('script');
      GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
      GM_JQ.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(GM_JQ);
  ```
4.  After that I can use any valid JQuery statement to navigate through the page content and parse it.

  ```javascript
      var pages = [];
      $("#Text1 table a").each(function(){
              pages.push($(this).attr('href'));
      });
  ```
[2]: http://blogs.ischool.berkeley.edu/i290-04f09/2009/09/12/add-jquery-to-any-or-every-webpage/ "Add jQuery to any (or every) webpage"



How I scrape web pages


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

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

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

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

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

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

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


Shortcut to console.log


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

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

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

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

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

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

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

Considering that, my custom sorting function looks like this:

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

    itemsArray.sort(eventSorter);
```

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


Sorting an array of custom objects in JavaScript


Last Saturday, I was bored. So, thought of writing a game in JavaScript using HTML5 and CSS3 techniques. And thats how *[Rock Paper Scissors and Bombs][1] *came to life.

[1]: https://veerasundar.com/rock-paper-scissors/ "Rock Paper Scissors and Bombs - Online game"

[![][3]][3]
Rock Paper Scissor and Bombs

It's a simple game that is played in many parts of the world (though with different names). To play, you and the other player should choose a hand gesture (either *rock, paper or scissor) *at the same time. The gesture which has higher power than the other one is decided as the winner.

[]: https://veerasundar.com/rock-paper-scissors/ "Rock Paper Scissor and Bombs"

Initially, when I started coding this game, I didn't have any intention to add *Bombs* to it. But, finally when I completed the game UI, I'd the little idea of tilting the score panel based on the score weight. i.e. the bigger the score, the higher the score's side goes up.

And then, I thought it would be nice to place a bomb over the score panel so that when the lower score side tilts more, the bomb will fell down on that side thereby killing that player.

It took around 10 hours to complete this game. In one week, it has generated 500 Unique visitors and 1K page views till now. Not bad for a hobby project, I would say!

Please [play this game][3] and I hope you'll like it. And of course, your feedback is always appreciated.

[3]: https://veerasundar.com/rock-paper-scissors/


Rock Paper Scissors and Bombs


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

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

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

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

Lets do it..

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

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


Intercepting onclick event in JavaScript using JQuery


All these days, I was using [my home page][1] to tell my visitors about myself. My previous home page designs were all similar to magazine style with all the information spread across the page and the visitor can go and read.

[1]: https://veerasundar.com

But yesterday, I got an idea to change this. What if the user discover the information about me rather than me showing all information at once. It would increase the visitors curiosity and give them some fun rather than boring reading stuff.

Then born the idea of presenting my information by means of a simple card matching game. Sat down for 5 hours to write the game logic and design the site - thanks to JQuery, JQuery Flip, HTML5 and CSS3 for designing websites such an easy task. Within one day, I conceptualized the idea, implemented it and pushed it to live.

[![vraa-home-page][3]][3]

[]: https://veerasundar.com

Only the basic version is now live. I'm planning to add scoring, reloading, randomizing cards position and few more stuffs once I get some positive feedback from my readers.

[Play the game][1] and let me know your feedback.


Redesigning my home page as a game


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

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

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

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

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

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

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

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

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

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

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

Here's the cross-browser solution:

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

That should do the trick!


JavaScript getAttribute method


Firebug is an inseperable tool in any Web developer's toolbox. It's one of the best things that happened to JavaScript and Web Development. I have been using Firebug for a long time and have been wondering how my web development would be if there is no Firebug. So, in this article, I'm sharing few of my tips and tricks to use Firebug effectively to speed up your web development.

## 1. Visually modifying page layout in Firebug

Firebug's *Layout *panel let's you to examine the selected element's height, width and other position related attributes in a visual manner. Apart from showing the positional attribute values, the *Layout *panel allows you to edit the values directly from the panel. To edit a value, just click on it and the modified value will be reflected immediately on the page.

![Visually modifying page layout using Firebug][1]

[1]: https://veerasundar.com/img/2010/02/firebug_layout.png "Visually modifying page layout using Firebug"

## 2. See the computed styles for an element

As you might have known, CSS apply styles in a cascading manner (after all, it is _cascading_ style sheet, isn't it?). I.e. The styles that are defined for the parent element will be applied to all of it's child elements too. But, the child element is allowed to override any of the parent styles and define its own styles. Thus, the final set of style attributes which are applied to an element is always changed at the run time. To view the final style attributes, which are calculated after applying all the inherited style definitions, are displayed in the _Computed_ panel. Please note that it is not possible to edit any attribute from this panel.

![See the computed styles for an element][2]

[2]: https://veerasundar.com/img/2010/02/firebug_computed.png "See the computed styles for an element"

## 3. Find out which CSS file is the black sheep

Some times it becomes very difficult to figure out which CSS definition is affecting a element style. When more than one CSS files are being used in a single page, then it becomes even more difficult. In such scenarios, Firebug could be used to identify the CSS file name from which an CSS style definition is being taken. For example, in the below screenshot you can see that the particular page uses two CSS files (_screen.css_ and _reset.css_) and the _Style_ panel clearly displays which style is taken from which CSS file. The overridden styles are striked out. The _Style_ panel also links to the URL of the style file being used, so it is easy for us to get the entire CSS file if needed.

![Find out which CSS file is the black sheep][3]

[3]: https://veerasundar.com/img/2010/02/firebug_multi_styles.png "Find out which CSS file is the black sheep"

## 4. Not just edit CSS, edit HTML too

Firebug _Style_ panel lets you to edit any CSS attribute and view the results immediately. Firebug can be used to edit the HTML content also. To do it, right click on the tag which you want to edit in the _HTML_ panel and then select `Edit HTML` (or, just double click on the element). Firebug opens the inner HTML of the element you selected in edit mode. The changes you make will be visible on the page immediately.

![Not just edit CSS, edit HTML too][4]

[4]: https://veerasundar.com/img/2010/02/firebug_edit-e1265179743540.png "Not just edit CSS, edit HTML too"

## 5. Jump to the element you are editing

This is a nifty option for quickly navigating to the element that you are currently working. While editing a HTML element, right from the _HTML_ panel, you can easily bring that element into view by right clicking and selecting _Scroll into view_.

![Jump to the element you are editing][5]

[5]: https://veerasundar.com/img/2010/02/firebug_scroll_view-e1265179923269.png "Jump to the element you are editing"

Become IT expert with [testking 350-001][6] training course. Get the latest [testking SY0-201][7] css tutorials and [testking 642-901][8] study guide to learn about different web applications.

[6]: http://www.testking.com/350-001.htm
[7]: http://www.testking.com/SY0-201.htm
[8]: http://www.testking.com/642-901.htm


5 Ways of effectively using Firebug to edit HTML, CSS


Recently one of my colleague asked me the question

> 'I am a Java resource. Is it necessary for me to learn and understand the web design?'

I've seen many newcomers to Java language has been discussing this topic with themselves when they are given training in HTML and web design. For many of those folks, JavaScript is the another name for a nightmare. They just don't understand the necessity for a Java developer to learn HTML. This happens mainly for the people who are switching from a AS400/Mainframe or any other non-web technologies to Java. If these developers are going to design a web site without the proper understanding of web design techniques, they simply fail or got struck even for a simple mistake in the HTML code.

In my opinion, knowledge about (at least in a basic level) HTML/JavaScript/CSS is a must for any Java developer, unless you are completely going to work in Java SE. For all those Java developers, I would like to give some tips from my own experience in reviewing some Java developers page design markup:

- **Close all the HTML tags properly:**
  If all the HTML tags are closed properly (i.e. inner tags are closed first and then the outer) most of the page layout problems will be solved. Most Java developers would be using a CSS written some other web designers and a template HTML page. When they want to modify or add any data to the HTML page, they usually cut and paste HTML tags and forgetting to close them properly. This may affect CSS styling and the page layout may collapse. Properly closing the HTML tags may save lots of HTML debugging time to those Java developers.
- **Never use inline CSS styling / Scripting:**
  This is the frequent mistake I've seen most of the Java developers doing while designing the page. They just embed in the servlet/JSP page itself. Avoid this kind inline definitions. Externalize styling and scripting. It makes the page to be re-designed easily without much effort. and helps us to organize the code better.
- **Learn basics of CSS / JavaScript:**
  By learning this, you need not to wait for a web designer to come and fix your page for a proper layout. Also it helps you to add two more technologies to your resume. ![:-)][1] )
- **Use Firefox and Firebug:**
  I would recommend this combination to a seasoned web designer, but it is also good for the beginners to know about this. Firebug is the best thing that happened to JavaScript ever. With this little Firefox plug-in debugging JavaScript becomes much easier. Inspecting DOM elements also possible in Firebug, so finding out which CSS style affects which HTML element is no longer harder.

Above simple tips, if followed, could save lots and lots of time for a web design beginner.

Would you like to add anything to it? What are your tips / suggestions for a Java developer turned web designer?

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


#javascript (50)