
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


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


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

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

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

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

```json
{
  "hosting": {

    ... other configuration,

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

Redirecting blog URL without date in Firebase Hosting

If you are using WSL in Windows and forgot your username's password, it's quite easy to change it. Follow the steps below:

1. Open Windows Powershell and type `wsl -u root`
2. Enter `passwd USERNAME` - here replace USERNAME with the ubuntu username for which you want to change password.
3. Type the New password.

Now your ubuntu user's password is successfully changed.

How to change Windows Subsystem Linux (WSL) user password

I have been hosting my [resume online](https://veerasundar.com/resume/) for years. And when recruiters ask me to share my resume, I send them a link to my online resume. But some of them do ask me to share a document version, to which I send them a PDF copy.

Here's the process I follow to export my single page HTML resume to PDF.

## 1. Building your resume with HTML

The first step is to have your resume designed and built. I start with RAW HTML and have the structure built. I also use [Microformats](http://microformats.org/) to tag semantic data. This helps a lot with SEO and other similar tools.

Here's an example `experience` item with microformats defined.

```html
<li class="experience p-experience h-event salesforce">
  <div class="time">
    <p class="dt-end" title="present">Present</p>
    <p class="dt-start" title="April 2016">07/2017</p>
  </div>
  <div class="data">
    <h3 class="summary p-name">Lead Member of Technical Staff</h3>
    <p class="location p-location">
      <img
        class="favicon"
        src="https://www.salesforce.com/etc/designs/sfdc-www/en_in/favicon.ico"
      />
      <a class="h-card" href="https://salesforce.com"
        >Salesforce <br />
        Hyderabad, India & San Francisco, USA</a
      >
    </p>
    <p class="note p-summary">
      Responsible for developing, maintaining, and providing
      technical support for core web components using the
      Lightning Web Components framework. I also took a leading
      role in ensuring accessibility for all components.
    </p>
  </div>
</li>
```
Follow the [h-resume](http://microformats.org/wiki/h-resume) microformat page to find out all relevant tags that you can use.

## 2. Designing the resume with CSS

Once we have the content ready, the next step is to make it look pleasing to the eyes. I use `grid` and `flex` a lot to define my resume layouts. We also need to set the height and width of our page, so when we export / print our resume, things will not be mis-aligned.

In my case, my target page is **A4**, hence I am setting my page's width and height as follows.

```css
@media print, screen and (min-width: 210mm) {
  html,
  body {
    width: 210mm;
    max-width: 210mm;
    height: 297mm;
    max-height: 297mm;
    padding: 0;
    margin: 0;
  }
}
```

Define your styles inside `@media print` so when you try to export to PDF, the styles apply there as well.

## 3. Exporting the HTML resume to PDF

The final step in this process is to export the resume built with HTML and CSS, to a PDF document. Nowadays almost all modern browsers are equipped with **Print to PDF** functionality. Just press `Ctrl + P` (on Windows) and you will get the Print Preview dialog.

![export to PDF](/img/export-to-pdf.png)

Remember when we used `@media print` in our styles? Because of that, the page look as is when you see it in print preview. Now, all you have to do is, select `Print to PDF` and choose the relevant options and click `Print` at the end. Now you will have your HTML resume exported to a PDF document.

How to make your resume with HTML and export it as PDF file

Let's say you want to add a tweet button to your blog, so your readers could reach out to you. You do not want to include the twitter SDK either, because of privacy concerns. How will you do it?

![an illustration of a person holding a mobile phone](https://i.imgur.com/zNnBop0.jpg)

That's exactly the question I had when I replaced Disqus with Twitter as a way of interacting with my readers - how to add the ability for the readers to type in a message and tweet me without having any Twitter JavaScript files? Here's how solved it.

## Twitter web intent API

Luckily, Twitter has exposed a public API [https://twitter.com/intent/tweet](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent) through which you can compose and post a tweet via a link. Which means, if you have a link on your page with `href` set to [https://twitter.com/intent/tweet?text=hello](https://twitter.com/intent/tweet?text=hello), when the user clicks on the link, it will take user to Twitter page with the text pre-populated. Go ahead, give it a try - don't worry, nothing will be posted on your timeline until you explicitly tweet.

Along with `text` you can also pre-configure `url`, `via` and other attributes to pre-fill the twitter message. Here's a full list of all allowed [tweet intent parameters](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent).

## No link and no JavaScript either

If you looked at the [Twitter Web Intent](https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview) overview page, they are asking to include teh twitter JavaScript files, which I don't want to do. I also don't want a pre-configured a link. Instead, I want a text box where the user could type in their message and then a tweet button.

![screenshot of a web form with a text box and a tweet button](https://i.imgur.com/rVMlNTU.png)

## Behold - the form

I am sure you would have heard about the `form` element - it was in the HTML 101. Honestly, after the web 2.0, I don't exactly remember when was the last time I meaningfully used a web form.

`Form` is the exact answer for my use case. The `form` element has an attribute called `action` - you can set a URL to the action attribute and then the contents of the form will be sent to the said URL. The default submission method of `form` is `GET` - which means the form values will be appended to the `action` URL as query parameters, which is what I want.

Now, all I have to do is to add a form, targeting Twitter web intent URL.

```jsx
<form action={"https://twitter.com/intent/tweet"}>
  <textarea
    placeholder={"type your message and click tweet button"}
    name="text"
  />
  <button type={"submit"}>Tweet To Author</button>
</form>
```

When the user type in a text and slick the submit button, the form will redirect the user to `https://twitter.com/intent/tweet?text=usermessage`. So far so good.

Next, if you wanted to pass in other parameters such as `url` or `via` or even a pre-configured `text` without user entering them - you can use `hidden` input elements.

```diff-jsx diff-highlight
  <form action={"https://twitter.com/intent/tweet"}>
+   
+   <input type={"hidden"} value={"vraa"} name="via" />

+   
+   <input type={"hidden"} value={postURL} name="url" />
    <textarea
      placeholder={"type your message and click tweet button"}
+      defaultValue={"Hey @vraa, "}
      name="text"
    />
    <button type={"submit"}>Tweet To Author</button>
  </form>
```

That'll do it - I now have a tweet button without including any Twitter JavaScript files!

Now why don't you try it out below? What do you think about this post, send me a tweet!

How to add Tweet button without JavaScript


After I [moved my blog from Jekyll to Next.js](https://veerasundar.com/blog/how-to-move-blog-jekyll-to-next-js), the next step was to add themes. I wanted to provide at least four themes to the user, namely - dark, lunar, solar, light, ordered in the increasing level or luminosity. Let's have a quick look at the theme switcher in action:

![Theme switcher demo](https://i.imgur.com/PZMKawy.gif)

You can try it yourself from the theme switcher located top right of this page. Now that we know what we are going to build, let get right into the action.

## Using css variables to theme the page

You can use several techniques for applying theme to a page. For example, if you are familiar with `styled-components`, you can use `ThemeProvider` to pass down the theme object in the component hierarchy. You can also style elements under different theme class names and based on user selection you can switch the class name of root level element. There's also CSS variables.

[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) could make your life much more simpler. It's an intuitive approach towards theming. For example, take a look at the following example:

```css
body {
  --color-bg: #fff;
  --color-fg: #3d3d3d;
  --color-link: lighblue;
}
body[data-theme="dark"] {
  --color-bg: #000;
  --color-fg: #fafafa;
  --color-link: yellow;
}
```

You define a default theme variables in the `body` tag. You then customize those variables under `body[data-theme="dark"]` tag for a dark themed page. When you want to switch theme, you just need to set a data attribute name `data-theme` with a value of 'dark' or what ever the theme name you chose. You can define as many themes as you wish in this approach.

Later in your CSS files,you consume the defined CSS variable, as below:

```scss
.content {
  background-color: var(--color-bg);
  color: var(--color-fg);

  a {
    color: var(--color-link);
  }
}
```

## Preserving user theme preference

Once the user selects a theme, you need to remember this selection. We could use `localStorage` for this purpose.

```javascript
// I read the theme from local storage and set it onto body data attribute earlier in my code, so
const [theme, setTheme] = useState(document.body.dataset.theme);

// sync the changed theme value to local storage and body data attribute
useEffect(() => {
  if (theme && theme !== document.body.dataset.theme) {
    window.localStorage.setItem("theme", theme);
    document.body.dataset.theme = theme;
  }
}, [theme]);

const selectTheme = (e) => {
  const nextTheme = e.currentTarget.value;
  setTheme(nextTheme);
};
```

Make a note that we are accessing `document` in the above code, which is not available in you normally load this component in Next.Js. Because the regular components are rendered at server side / build time, they may not have access to browser features such as `document` or `localStorage`. For this, you need to [import the code dynamically](https://nextjs.org/docs/advanced-features/dynamic-import). In my case, my `ThemeSwitcher` component is part of the `Header` component, which I imported as a dynamic component as below.

```javascript
import dynamic from "next/dynamic";

const DynamicHeader = dynamic(() => import("../components/header"), {
  ssr: false,
});
```

## Restoring saved theme and avoiding flash of light

If you try to read from local storage and then switch theme - then the user would see a flash of default theme first (light theme, in our case) and then the selected theme. This is not a great user experience. To avoid this, we need to place the JavaScript code that reads from localstorage as a **blocking** code, right before any JS code executes or DOM is rendered. Remember browser blocks the page rendering until it executes any JS code that comes before markup.

In Next.js, we can place the theme initialization code in a special file called `pages\_document.js`.

```diff-javascript
// pages/__document.js
+ const themeInitializerScript = `
+       (function () {
+         document.body.dataset.theme = window.localStorage.getItem("theme") || "light";
+       })();
+   `;

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
+          <script
+            dangerouslySetInnerHTML={{ __html: themeInitializerScript }}
+          />
        </body>
      </Html>
    );
  }
}
```

Theme initializer code is placed as the first child of `body` - so, until this little JavaScript executes, browser would block rest of page rendering. When the page is finally rendered, we would have set the proper theme at the body tag, thus we will avoid the flash of light between page refresh or navigation.

That brings us to the end of the article. Thanks for reading.

How to add dark mode to your Next.js blog

This blog was used to be statically generated with [Jekyll](https://jekyllrb.com/), but not anymore!

I replaced Jekyll with Next.js, because I wanted to move away from Ruby gems . In this post, let me tell you how I did the move, so if you ever wanted to move yours, it would help you.

## The plan

Here's the overview of steps that I planned for the move.

1. Set up the Next.JS framework to compile blog posts written in markdown format
2. Transform Jekyll blog posts from the `YYYY-MM-DD-post-name.md` format to `post-name.mdx` so Next.JS could understand it.
3. Setting up code highlighting
4. Set up `nginx` server to rewrite old URLs to new ones.

Now, let's get to the execution part of it.

### 1. Setting up Next.js framework to compile markdown files

By default, Next.js won't recognize [mdx](https://mdxjs.com/) files. There are several tools available to make Next.js work with mdx - [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) is one such tool. I followed this [example setup](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote) from Next.js which provides a base structure to compile mdx files.

After cloning, I customized the folder structure and styles to my liking.

### 2. Transforming old Jekyll posts

I used to save my Jekyll blog posts in `YYYY-MM-DD-post-name.md` format - which won't work (or need customization) in Next.js. So, I had to move all my existing files to the `post-name.mdx` format.

I also had to copy the post date, which was originally part of the file name, into the front matter of my posts. For this, I used [gray-matter](https://www.npmjs.com/package/gray-matter) npm package.

Here's a script that I wrote for the conversion.

```javascript
const fs = require("fs")
const path = require("path");
const matter = require("gray-matter");

const POSTS_FOLDER = path.join(__dirname, "_posts");
const OUT_FOLDER = path.join(__dirname, "out");
try {
  const posts = fs.readdirSync(POSTS_FOLDER);
  for(let i=0; i<posts.length; i++) {
    const post = posts[i]
    const date = post.substr(0,10);
    const fileName = post.substr(11).replace(".md", "");
    const fileContent = fs.readFileSync(path.join(POSTS_FOLDER, post), 'utf8')

    const parsed = matter.stringify(fileContent, {
      publishedOn: date
    })

    fs.writeFileSync(path.join(OUT_FOLDER, `${fileName}.mdx`), parsed)
  }
} catch (e) {
  console.error(e)
}
```

Once converted, I copied all the files from my output folder to my Next.js instance.

### 3. Setting up code highlighting with remark-prism

I share a lot of coding examples in my blog. In Jekyll, I was using `rouge` highlighter for pretty printing my code. In Next.JS I have to use `remark-prism` for this purpose. `npm install remark-prism` then initialize it where you are [rendering mdx to string](https://github.com/vercel/next.js/blob/canary/examples/with-mdx-remote/pages/posts/%5Bslug%5D.js#L71) like this

```javascript
import remarkPrism from "remark-prism";
// ....
// ....
const mdxSource = await renderToString(content, {
    components,
    // Optionally pass remark/rehype plugins
    mdxOptions: {
      remarkPlugins: [remarkPrism],
      rehypePlugins: [],
    },
    scope: data,
  });
```

Also, I had to manually search and replace all my code block markers to the new template. For example, `{% highlight javascript %} code block {% endhighlight %}` to ` ```javascript  code block ``` `

### 4. Setup nginx to rewrite URLs from old format to new format

My Jekyll posts used to have the URL of `https://veerasundar.com/blog/post-name` - which is unnecessarily long. I wanted to remove the year/month information from the URL. The new format will be `https://veerasundar.com/blog/post-name` which is much simpler. At the same time, I don't want to break all my existing URLs. So, I needed a server set up which will redirect requests to my old URLs to new ones. Here's the change I made for this

```bash
 location /blog {
        rewrite ^/blog/[0-9]+/[0-9]+/(.*)/$ /blog/$1.html permanent;
        rewrite ^/blog(/?)$ /blog.html permanent;
        try_files $uri $uri.html =404;
}
```

That's all I had to do to move my blogging platform from Jekyll to Next.js. If you have any questions or need help in the above process, please feel free to reach out to me.


How to move your blog from Jekyll to Next.JS


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


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

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

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

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

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


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


During my web development, I usually need to run different terminal applications, like webpack, node server, etc. As Windows command prompt does not support tabs, I had to open multiple command prompts, which is very ineffective. This is not a problem for Mac / Linux users, as their consoles support programs like `tmux`.

Fortunately, now Windows 10 allows you to run a Linux subsystem inside windows. Once enabled, one can install a Linux distribution such as Ubuntu and can run Linux command line programs inside Windows (with some limitation though). With this, I can split my terminals into multiple parts as below.

![Tmux running in Windows 10](https://i.imgur.com/qgGrg2s.png)

## Setting up Split screen terminals in Windows

Follow the steps to get this setup in Windows 10.

1. Go to `Settings -> Update & Security -> For Developers` and enable `Developer Mode`. Click _Yes_ in the alert box.
2. Once you enable _Developer Mode_, now go to: `Control Panel -> Programs -> Turn Windows features on or off`. Search for `Windows Subsystem for Linux` and enable it. This will install necessary components in your system. You may have to restart your system.
3. After you restart, go to `Microsoft Store` and search for `Ubuntu`. Install this app.
4. Once `Ubuntu` is installed in your system, open it (just search for it in start menu). When it opens for the first time, it will download necessary files and will ask you to create a username and a password. This does not need to match your Windows password. Remember this username and password as this will be the `root` user and needed to install anything inside Ubuntu.
5. Now you are inside Ubuntu land. You can run linux command line applications such as vi, git, apt-get, etc.
6. Run `sudo apt-get install tmux`. This will install the terminal multiplexer application [tmux](https://en.wikipedia.org/wiki/Tmux).
7. Once `tmux` installed, now run `tmux`.

Now you can run any tmux command. For example, to split the terminal screen vertically, press `Ctrl + b` and `%`. And to split screen horizontally, press `Ctrl + b` and `"`.

## Bonus: Making your boring terminal to look awesome - ohmyzsh

![OhMyZsh](https://i.imgur.com/RudXI5J.png)

The default bash terminal is good. But it is not that good without [ohmyzsh](http://ohmyz.sh/) - a framework to install themes and plugins in your terminal. Let's set this up.

1. Inside Ubuntu terminal, run `sudo apt-get install zsh`.
2. Once `zsh` is installed, switch to it by running `zsh`.
3. Now go to [http://ohmyz.sh/](http://ohmyz.sh/) and follow their instructions to install `ohmyzsh`.
4. Once it is installed, just close and reopen the Ubuntu. When `ohmyzsh` installed, it would have setup `zsh` as your default terminal.
5. Open zsh profile by running `vi ~/.zshrc` and update any theme you want in `ZSH_THEME` options. You can see the list of themes in here: [https://github.com/robbyrussell/oh-my-zsh/wiki/Themes](https://github.com/robbyrussell/oh-my-zsh/wiki/Themes)

My favorite `ohmyzsh` theme is **ys**. What's yours?


How to split the terminal into multiple screens in Windows 10


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


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


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

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

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

But which one is the best way to use?

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

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

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

Let's see this with an example.

```javascript

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

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

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

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

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

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

```

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

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

```javascript

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

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

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

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

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

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

```

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

## 2. Prototype is fast and memory efficient.

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

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

Let's see this with an example.

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

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

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

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

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

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

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


Javascript Prototype methods vs Object methods


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

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

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

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

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

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

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

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

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


Responsive timeline with CSS and HTML


By default, Nexus 4 does not provide the option to select a custom MP3 / sound file as the ringtone. You are limited to the set of built-in ringtones provided by Nexus.

But, here's a simple trick to set your own custom ringtone. Don't worry, you don't need to install any creepy app to do that (of course, there's an app for that, but we don't need it now). All you need is a laptop and a USB cable.

Here's how you set custom ringtone in Nexus (assuming you have Windows 7 here):

1. Connect your Nexus 4 to your laptop and make sure it **Connected as Media device (MTP)**.
2. Now, in Windows Explorer (or any file browser in your OS), open the Nexus folder, and navigate to the **Ringtones** folder.
3. Copy your custom ringtone files here.

Tada! Now you'll see the newly added ringtone listed in Nexus **Settings -> Sound -> Ringtone** panel.

**Protip:** You can use freely available [Audacity] (http://audacity.sourceforge.net/) to create your custom ringtones out of any MP3 / Sound files.


How to set custom Ringtones in Nexus 4


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

    PS C:\vraa\workspace

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

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

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

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

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

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

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

    foldername>

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

    gitrepo [ master ] >

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

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


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

Customize Powershell Prompt Message

While writing JavaScript code, I often write debug messages to console using *console.log.* Though it is shorter than *System.out.println()* (hey, you Java!), which I am used to a lot, I still find it ineffective to type it every time.

So, I was following the approach to [bind console.log function to shorter name][1]. Here's another technique which is specific to Sublime Text.

[1]: https://veerasundar.com/blog/shortcut-to-console-log "Shortcut to console.log"

Using Sublime Text *Snippets* option, you can create a shortcut to a template and then you can insert that template in multiple places just by triggering the shortcut. Here's how I did it so that every time, I type *echo*, Sublime Text converts it into *console.log();*

Go to *Tools -> New Snippet*. Sublime will open a template in a new file. Now make sure you have this content in that file (or change it the way you want).

```xml
    <snippet>
    <content><![CDATA[
    console.log(
    ]]></content>
    
    <tabTrigger>echo</tabTrigger> -->
    
    <scope>source.js</scope>
    </snippet>
```

Then save this snippet file as *echo.sublime-snippet* under *Packages/User* folder. To find the location of *Packages/User* folder, in Sublime, go to *Preferences -> Browser packages* and note the location.

Restart sublime and then in a JavaScript file, start typing *echo* and Sublime will provide you with a dropdown to replace *echo* with the template you just created.

Creating a shortcut to console.log in Sublime Text 2


I have started using [Sublime text][1] as my preferred code editor (for JS, CSS, Coffee). But, I still rely on Eclipse for writing Java code because it auto-imports Java packages and auto suggests variables and method names from my custom class files.

[1]: https://veerasundar.com/blog/unix-alias-with-parameters-or-opening-sublime-text-editor-from-command-line

Working on multiple editors throws in another problem: whenever I make a change in some file outside of Eclipse, the IDE does not silently reload. It shows a blank page saying 'The resource is out of sync. Press F5 to reload'. The message started annoying me soon as I had to switch back and forth often.

It is not just for the multiple editors. Even when I do a *git pull,* the resources go out of sync.

Then, I found a workaround for this. Eclipse provides a built-in option that auto reloads a resource if its out f sync. Here's how you  can enable it.

Go to **Window -> Preferences -> General -> Workspace **and check the option **'Refresh using native hooks or polling'**.

So, the next time when you try to open a out of sync file, the IDE will sync it for you (thus saving you a keystroke, one at a time ![:)][2] ).

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


How to auto reload external code changes in Eclipse project


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

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

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

[gist id='1976268']

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

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


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


Today I got stuck on what could be a simple problem to long time Ubuntu users - making changes that require *root *access.

I never faced this problem until today because my Ubuntu user account/password was enough to make system level changes as it was treated like admin user by Ubuntu.

Today I tried to modify the directory */var/www *which is owned by the _root_. Since the folder is not owned by me, Ubuntu asked me to enter the *root* password and I typed my Ubuntu user password. It didn't work, obviously.

Then I tried to escalate the permission level to *root, *so I tried the command: *su root *and gave my Ubuntu user password. This also failed.

After googling sometime, I found out that,

1.  Ubuntu does not allow you to directly login as _root_.
2.  The first Ubuntu account you create is treated like *admin* account.

So, in order to escalate yourself as a *root *user in Ubuntu terminal, I had to give the command: '**\*sudo su -' **(without quotes) *and then enter my current Ubuntu user password. After that, I was escalated to *root _user and then able to modify the _/var/www \*folder as I wanted. Piece of cake!!


root user in Ubuntu


It seems like the Chrome browser in Ubuntu has some issues in displaying Tamil fonts. I guess, other Indian languages also might be having the same issue. The weirdest thing is Firefox was displaying the Tamil content properly.

So, after searching through the Chromium group for a while, found the fix for this issue.

## To fix Tamil font in Ubuntu Chrome

1.  Open Terminal
2.  Go to the folder: **cd /usr/share/fonts/truetype/freefont**
3.  Delete \*FreeSerif.ttf: **\*sudo rm FreeSerif.ttf**
4.  Delete \*FreeSans.ttf: **\*sudo rm FreeSans.ttf**
5.  Close and re-open the browser.

The Tamil font should be displayed properly now.


Fix for viewing Tamil font in Chrome - Ubuntu


So, you have installed XAMPP on windows, [changed its server port][1] to a different number other than 80 and [changed the MySQL *root* password][2] to a more secure one. Now its the time to create some HTML files that will be served by XAMPP server.

[1]: https://veerasundar.com/blog/how-to-change-xampp-server-port "How to change XAMPP server port?"
[2]: https://veerasundar.com/blog/how-to-change-the-root-password-for-mysql-in-xampp "How to change the 'Ëœroot' password for MySQL in XAMPP?"

By default, XAMPP serves any file that is located under the directory *[xampp\_installation\_folder]/htdocs, * which means that you have to copy all your HTML/PHP files inside this directory. But what if you maintain a different folder for all your projects files and you want XAMPP to serve them too along with _htdocs_?

Lets make XAMPP to do this.

1.  Open the file *[xamp\_installation\_folder]/apache/conf/httpd.conf* in any text editor.
2.  Copy below lines after the _htdocs _ element after changing the directory to your own folder.

            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Order allow,deny
            Allow from all

3.  Then search for this string: . Inside that element, add a new alias as followed:
    Alias /yoursite/ "C:/path/to/your/folder/yoursite/"

4.  Save the file and restart the XAMPP server.

After this, if you have a website named 'Ëœyoursite' inside the folder *'Ëœc:/path/to/your/folder'* you can access it directly by using the URL: _http://localhost:8080/yoursite/ _(assuming you have [changed XAMPP port][3] to 8080).

[3]: https://veerasundar.com/blog/how-to-change-xampp-server-port "Change XAMPP server port"


Making XAMPP to serve any directory outside htdocs


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

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

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

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

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

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

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

Considering that, my custom sorting function looks like this:

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

    itemsArray.sort(eventSorter);
```

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


Sorting an array of custom objects in JavaScript


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

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

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

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

Lets do it..

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

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


Intercepting onclick event in JavaScript using JQuery


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

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

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

## Enable Internet permission for your android application:

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

## HTTP GET request in Android application:

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

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

## HTTP POST request in Android application:

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

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

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

Making GET and POST requests in android application


To add JSTL to your project;

[Download jstl.jar & standard.jar (360KB)][1]

[1]: http://www.box.net/shared/gzz2nyf9s506d3h3vkzq "download jstl.jar and standard.jar"

1.  Download the *jstl.jar *and *standard.jar* files from the above download link (or you can get these from your local Apache Tomcat installation too!)
2.  Put them in your project's *WEB-INF/lib* folder.
3.  Add them to the CLASSPATH.
4.  Now you can use JSTL in your pages.

So, why this post about an obvious thing?

Well, I've seen people get confused when they try to install JSTL for the first time. They google for '_download JSTL or install JSTL_' which will end up in the page [JSTL downloads][2] (which is surprisingly still hosted at **\*java.sun.com\*\***). *And, god only knows what you can download from *that\* page!

[2]: http://java.sun.com/products/jsp/jstl/downloads/ "JSTL downloads"

That is why I'd put together this simple [download][3] link. Hope it'll be useful for the JSTL beginners.

[3]: http://www.box.net/shared/gzz2nyf9s506d3h3vkzq "download JSTL"


Download and install JSTL


In Eclipse, when you press *Ctrl *button and click on any Class names, the IDE will take you to the source file for that class. This is the normal behavior for the classes you have in your project.

But, in case you want the same behavior for Java's core classes too, you can have it by attaching the Java source with the Eclipse IDE. Once you attach the source, thereafter when you _Ctrl Click_ any Java class names (_String_ for example), Eclipse will open the source code of that class.

To attach the Java source code with Eclipse,

1.  When you install the JDK, you must have selected the option to install the Java source files too. This will copy the **src.zip **file in the installation directory.
2.  In Eclipse, go to **Window -> Preferences -> Java -> Installed JREs -> Add **and choose the JDK you have in your system.
3.  Eclipse will now list the JARs found in the dialog box. There, select the **rt.jar** and choose **Source Attachment**. By default, this will be pointing to the correct **src.zip**. If not, choose the **src.zip **file which you have in your java installation directory.  
    ![java source attach in eclipse][1]
4.  Similarly, if you have the **javadoc **downloaded in your machine, you can configure that too in this dialog box.

[1]: https://veerasundar.com/img/2011/08/source-attach.png "source-attach"

Done! Here after, for all the projects for which you are using the above JDK, you'll be able to browse the Java's source code just like how you browse your own code.


Attaching Java source with Eclipse IDE


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

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

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

## Git Branch:

![git branching][1]

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

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

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

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

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

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

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

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

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

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

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

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

  # On branch india

  # Changes to be committed:

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

  #

  # modified: helloworld.txt

  #

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

## Merging changes back to main branch:

![git merge][3]

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

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

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

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

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


Git tutorial - branching and merging


Continuing from my last post, which explained [my Git workflow][2], in this post I'm sharing how to compare different versions of files. Before that, you might want to read the [Getting started with Git][3] post too if you haven't done already.

[1]: https://veerasundar.com/img/2011/06/compare-apple-orange-300x255.gif "compare-apple-orange"
[2]: https://veerasundar.com/blog/git-tutorial-my-git-work-flow "Git tutorial - my Git work flow"
[3]: https://veerasundar.com/blog/git-tutorial-getting-started "Git tutorial - Getting Started"

The main objective of version controlling is to enable you to work with different versions of files. Git provides a command **diff** to let you to compare different versions of your files.

The most common scenario to use **diff** is to see what changes you made after your last commit. Let's see how to do it.

I opened the **helloworld** project from [my last example][4] with a clean working directory. i.e. I have already committed all my code changes. So, a git status will give an output like this:

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

```shell

    C:/vraa/projects/helloworld> git status
    # On branch master
    nothing to commit (working directory clean)

```

Let's make a change in the _helloworld.txt_ file now and compare this file with previously committed version.

```shell

    C:/vraa/projects/helloworld> edit helloworld.txt
    C:/vraa/projects/helloworld> git diff HEAD helloworld.txt
    diff --git a/helloworld.txt b/helloworld.txt
    index e4f37c4..557db03 100644
    --- a/helloworld.txt
        b/helloworld.txt
    @@ -1  1 @@
    -Hello India
     Hello World

```

There it is. Git shows the exact change I made in the file. But, if you look at the diff command, you might wonder what HEAD is doing there! Well, it is there for a purpose.

If you can recall, Git has an _index_ between local repository and your working directory. So most of Git commands can either refer to _index_ or the local repo. When you say HEAD in your Git command, it refers the _local repo_.

```shell

    //  compare the working directory with local repository.
    git diff HEAD [filename]

    // compare the working directory with index.
    git diff [filename]

    // compare the index with local repository.
    git diff --cached [filename]
```

You can also compare files between two different commits. Every commit in Git has a commit id which you can get when you give **git log**. Then you can use the commit id if diff command like this.

```shell

    git diff 7eb2..e03 812...a3f35

```

You can compare not just a single file, but all your changes at once. If you made changes in many files, just don't mention any file name in the diff command which will diff all the changed files.

```shell

    // compares working directory with index,
    // i.e. shows the changes that are not staged yet.
    git diff

    // compares working directory with local repository.
    // shows the list of changes after your last commit.
    git diff HEAD

    // compares index with local repository.
    // shows the diff between your last commit and changes to be committed next.
    git diff --cached

```

That's it about the basic introduction to compare files in Git. If you have any comments about this series, do let me know. I'll continue with other topics in my next post.


Git tutorial - comparing files with diff


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

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

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

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

## 1. Git repository creation

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

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

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

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

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

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

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

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

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

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

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

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

## 4. Let's commit the changes

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

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

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

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


Git Tutorial - My Git work flow


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

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

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

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

## Say Hello to Git

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

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

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

[2]: http://osteele.com

![git workflow][3]

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

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

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

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

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

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


Git Tutorial - Getting Started


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

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

[Download the Source code][1]

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

## To write different log levels in different log files

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

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

## Custom Appender: LogLevelFilterFileAppender

```java
    package com.veerasundar.log4j;

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

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

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

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

    	public LogLevelFilterFileAppender() {

    	}

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

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

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

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

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

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

## log4j.properties file

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

## Let's test our code

```java
    package com.veerasundar.log4j;

    import org.apache.log4j.Logger;

    public class Log4jDemo {

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

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


Log4j Tutorial - Writing different log levels in different log files


![Google App Engine on Netbeans][1]If you just started with App engine development, you might be having a feeling that Eclipse is the preferred IDE. And, Google also has offered its [official plug-in][2] to Eclipse IDE alone.

[1]: https://veerasundar.com/img/2011/04/nb.png "Google App Engine on Netbeans"
[2]: http://code.google.com/appengine/docs/java/tools/eclipse.html "It's easy to use the Eclipse development environment to develop your Java App Engine application, just as you can to develop any other servlet-based web application. With the Google Plugin for Eclipse, it's even easier. The plugin lets you create, test and upload App Engine applications from within Eclipse."

But what about the people who are not using Eclipse? Of course, you can always do a command line development but who does that these days!?

For **[Netbeans][3]** users, the plug-in **[nbappengine][4] **brings the Java app engine development to the Netbeans platform. Here's how you can start developing your app engine apps on Netbeans.

[3]: http://netbeans.org/
[4]: http://kenai.com/projects/nbappengine/pages/Home "Plugin enables J2EE development web modules on Google App Engine."

## Installing nbappengine plugin on Netbeans

1.  First thing first: Install the latest Netbeans (6.9 at the time of typing these characters) and open the IDE.
2.  Go to **Tools -> Plugins -> Settings **and click 'Add' button to add the nbappengine update center URL.
3.  Now give a name and the URL of the update center according to your version of Netbeans.
    - **Netbeans 6.9**: http://kenai.com/downloads/nbappengine/NetBeans69/updates.xml
    - **Netbeans 6.8**: http://kenai.com/projects/nbappengine/downloads/download/Latest_NetBeans68/updates.xml
    - **Netbeans 6.7**: http://kenai.com/projects/nbappengine/downloads/download/1.0_NetBeans671/updates.xml
4.  After adding it, now come back to the **'Available Plugins' **tab and do a search for 'Google'. Select all the plug-ins that are related to the App Engine and click install button.

## Configuring App Engine SDK with Netbeans

Now you've installed the nbappengine plugin on your Netbeans IDE.  The coming steps will tell you how you can configure the plugin with the App Engine SDK.

1.  Download the [App Engine SDK][5] for Java and extract the zip contents to your favorite location.
2.  In the Netbeans IDE, go to **Services window **(Ctrl 5 is the shortcut key) and right click on the **Servers **menu and select '**Add Server**'.
3.  Now select the '**Google App Engine' **from the list of servers and in the next screen choose the folder where you extracted your SDK files.
4.  Configure the server properties if you wish to change it and then click '**Finish'**

[5]: http://code.google.com/appengine/downloads.html#Google_App_Engine_SDK_for_Java

## Creating and deploying your first App Engine app on Netbeans

Now its the time to create a brand-new app engine application.

1.  In Netbeans, select '**File -> New Project -> Java Web -> Web application' **and follow the wizard to create the project.
2.  In the '**Server and Settings' **page choose '**Google App Engine' **as your server so that you'll get the app-engine related files (such as appengine-web.xml) pre-created for you.
3.  When you run/debug this application, Netbeans will start the app engine server (Jetty) and will deploy your application there.
4.  To deploy the application to the App Engine server, just right click on the project and choose '**Deploy to Google App Engine'. **it'll prompt you for the Google account credentials. After you provided that info, your app will be uploaded to the cloud.


App Engine Java development on Netbeans


Note: This post is written by/for the Java web developer who is using Google App Engine. Even if you are not an Java developer, but interested, you are welcome to read further.

![google-app-engine-logo][1]

[1]: https://veerasundar.com/img/2011/04/google-app-engine.png "google-app-engine"

When you create a new application in Google App Engine, you'll get a domain name 'yourapp.appspot.com'. But, who'll want to host their app with such a suffix (unless you like it!)?

To improve your app branding, the best thing to do is to host your app in '**www.yourapp.com**'. So, how to do this in App Engine?

There are two ways.

1.  You can buy a new domain name with Google partnered sites (such as GoDaddy).
2.  If you have already bought a domain, you can map that domain to 'yourapp.appspot.com'.

I'm going to explain the second method in this post.

## Steps to host GAE app in your own domain

### 1. Buy Hosting Space and Signup for Google Apps

1.  The first step, obviously, is you should buy a **domain hosting**. You will be adding CNAME entry in the DNS mapping to make things work and some hosting providers wont let you to add CNAME if you just bought only the domain name from them. So, it is good to buy the domain name as well as the hosting space so that you have full control over it.
2.  Then you need to signup for **Google apps** with your domain name. You can get a [free Google Apps version][2] which is pretty much sufficient for a small company/individual. You'll be asked to verify the ownership of your domain. Just follow the steps given there. You'll be also creating a admin account to manage Google Apps.

[2]: https://www.google.com/a/cpanel/domain/new "Free version of Google Apps - Signup page"

### 2. Add your application to Google Apps account

1.  Next, login to and go to the Dashboard of your app and choose '**Application Settings -> Domain Setup -> Add Domain**'.
2.  In the '**Add Domain**' screen, enter your domain name. You'll be asked to login to Google Apps with the admin account which you would have created during the second step. Once you login, your application will be added to your Google Apps account.

### 3. Add 'Ëœwww.yourapp.com' sub-domain mapping to yourapp.appspot.com

1.  Now login to **www.google.com/a/yourapp.com **with your admin account (if you are not logged in already). There you can see you app engine application listed in the Google Apps dashboard. Click on your appspot application.
2.  In the next screen, enter **www** in the text box to add a URL in the form of **www.yourapp.com**. As Google app engine does not support naked domains, you have to map the sub-domain, in our case **www**, to the appspot application. Once you add the URL you'll be given steps to add the CNAME record in your domain. After adding the CNAME record (explained in next steps), you should come back to this page and click complete.

### 4. Using CPanel, add a CNAME entry to ghs.google.com

1.  Now login to your domain admin panel. Since most of the hosting providers support CPanel, i'm giving the steps for CPanel.
2.  Login to **yourapp.com/cpanel **and go to '**Advanced DNS Zone editor' **where you can see the DNS mappings.
3.  Click the 'Edit' link against the **www.yourapp.com **and type '**ghs.google.com**' against the CNAME field. Leave other fields as it is. Save the changes.
4.  Thats it. It will take some time for the DNS propagation to happen. After that you can start accessing your appspot application with the URL **www.yourapp.com**!


Hosting Google App Engine application in your own domain


Mind Maps are **great**! Repeat, Mind Maps are **very, very great**! Let me show you why.

My work often demands me to switch between several tasks. In any given day, I have to work on several different features, bug fixes and analysis. At first, I was using simple text files to keep things organized. But then as the time goes on, this method proved very in-efficient and time consuming.

So I moved to Mind Maps. I use the free Mind Mapping software [SciPlore MindMapping][1] (I tried [FreeMind][2] too!) to organize my day-to-day notes.

[1]: http://www.sciplore.org/software/sciplore_mindmapping/
[2]: http://freemind.sourceforge.net/

Let me tell How I organize my notes using Mind Map, in the hope that if you are planning to use Mind Map, you'll have some reference to start.

## Starting with the base structure:

Here's how my top level mind map looks like:

![mind mapping structure ][3]As you can see, there are three top level nodes under _Global_:

[3]: https://veerasundar.com/img/2011/03/mind-map-1.png "mind-map-1"

1.  **\*Constants **- \*I use this node to store some static information like, stage URLs, test account names, passwords, etc.
2.  **_Methods _**- This is my knowledge store. I use this node to organize any techniques, or how-to-dos. For example, how to deploy a build on stage, how to remove clearcase views etc.
3.  **_Variables _**- This is the most happening node in this lot. This is my _working space._ This node contains my every day-to-day notes and activity logs. So, lets go further into this node and how I organize this one.

## Organizing the working directory:

![mind-map-working-directory][4]I further split the *Variables *into several team that I'm part of and year (to reduce the clutter) and to Sprints. At work, we follow Agile methodology, so it is very easy for me to organize notes per Sprint. Again for each sprint, I will work on stories as well as bugs. So, I splitted that too.

[4]: https://veerasundar.com/img/2011/03/mind-map-working-directory.png "mind-map-working-directory"

## Not just organizing, but visually prioritizing tasks

Here comes the good part. SciPlore lets me to put some icons next to each node. There are n-number of little icons that I can use to classify a node. For example, if a task is blocked for some reason, then I can assign a RED SIGNAL icon, so that I can immediately recognize the show-stopper if I come back to this task after switching between several tasks. Similarly there are lot more icons there which I can use. Here's a sample classification of one of my Sprint tasks.  
![mind-map-icons][5]

[5]: https://veerasundar.com/img/2011/03/mind-map-icons.png "mind-map-icons"

As you can see above, I have prioritized some stories with the numbers and marked some of them as completed. So, if I just open the stories node, I'll immediately get a picture of what is done and what is yet to be done.

## So, why should you use Mind Maps?

Let me list some of the benefits I get through Mind Maps.

1.  I spend **less time **searching for informations.
2.  I **immediately get to know **what is happening in my project. What's done, what's blocked and what's yet to be done (by means of assigning proper icons). So, at a glance, you get the whole status.
3.  **Visually organizing **rather than copy pasting and using indentation to group things, when compared with text files.
4.  Rather than scattering notes files into multiple folders, I can use a **single mind map **file to store them all.
5.  **Less Clutter **- SciPlore lets me to hide unwanted nodes so that I can focus only on the active task.

So, if you want all the above benefits, you should consider using Mind Maps! It's all up to you. ![:)][6] But, if you are already using Mind Map, I would be really interested to know your story.

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

Feel free to leave a comment about what do you feel about this post!


How I use Mind Maps


Thread Local is an interesting and useful concept, yet most of the Java developers are not aware of how to use that. In this post, I'll explain what is Thread Local and when to use it, with an example code.

Since it'll be little tough to understand this concept at first, I'll keep the explanation as simple as possible (**corollary**: you shouldn't use this code _as it is_ in a production environment. Grasp the concept and modify upon it!)

Let's begin.

## What is Thread Local?

Thread Local can be considered as a scope of access, like a _request scope_ or _session scope_. It's a _thread scope_. You can set any object in Thread Local and this object will be _global_ and _local_ to the specific thread which is accessing this object. Global and local!!? Let me explain:

- Values stored in Thread Local are _global_ to the thread, meaning that they can be accessed from anywhere inside that thread. If a thread calls methods from several classes, then all the methods can see the Thread Local variable set by other methods (because they are executing in same thread). The value need not be passed explicitly. It's like how you use global variables.
- Values stored in Thread Local are _local_ to the thread, meaning that each thread will have it's own Thread Local variable. One thread can not access/modify other thread's Thread Local variables.

Well, that's the concept of Thread Local. I hope you understood it (if not, please leave a comment).

## When to use Thread Local?

We saw what is thread local in the above section. Now let's talk about the use cases. i.e. when you'll be needing something like Thread Local.

I can point out one use case where I used thread local. Consider you have a Servlet which calls some business methods. You have a requirement to generate a unique transaction id for each and every request this servlet process and you need to pass this transaction id to the business methods, for logging purpose. One solution would be passing this transaction id as a parameter to all the business methods. But this is not a good solution as the code is redundant and unnecessary.

To solve that, you can use Thread Local. You can generate a transaction id (either in servlet or better in a filter) and set it in the Thread Local. After this, what ever the business method, that this servlet calls, can access the transaction id from the thread local.

This servlet might be servicing more that one request at a time. Since each request is processed in separate thread, the transaction id will be unique to each thread (local) and will be accessible from all over the thread's execution (global).

Got it!?

## How to use Thread Local?

Java provides an [ThreadLocal][1] object using which you can set/get _thread scoped_ variables. Below is a code example demonstrating what I'd explained above.

[1]: http://download.oracle.com/javase/6/docs/api/java/lang/ThreadLocal.html "Class ThreadLocal"

Lets first have the `Context.java` file which will hold the transactionId field.

```java
package com.veerasundar;

public class Context {

	private String transactionId = null;

        /* getters and setters here */

}
```

Now create the `MyThreadLocal.java` file which will act as a container to hold our context object.

```java
package com.veerasundar;

/**
 * this class acts as a container to our thread local variables.
 * @author vsundar
 *
 */
public class MyThreadLocal {

	public static final ThreadLocal userThreadLocal = new ThreadLocal();

	public static void set(Context user) {
		userThreadLocal.set(user);
	}

	public static void unset() {
		userThreadLocal.remove();
	}

	public static Context get() {
		return userThreadLocal.get();
	}
}
```

In the above code, you are creating a ThreadLocal object as a static field which can be used by rest of the code to set/get thread local variables.

Let's create our main class file which will generate and set the transaction ID in thread local and then call the business method.

```java
package com.veerasundar;

public class ThreadLocalDemo extends Thread {

	public static void main(String args[]) {

		Thread threadOne = new ThreadLocalDemo();
		threadOne.start();

		Thread threadTwo = new ThreadLocalDemo();
		threadTwo.start();
	}

	@Override
	public void run() {
		// sample code to simulate transaction id
		Context context = new Context();
		context.setTransactionId(getName());

		// set the context object in thread local to access it somewhere else
		MyThreadLocal.set(context);

		/* note that we are not explicitly passing the transaction id */
		new BusinessService().businessMethod();
		MyThreadLocal.unset();

	}
}
```

Finally, here's the code for the `BusinessService.java` which will read from thread local and use the value.

```java
package com.veerasundar;

public class BusinessService {

	public void businessMethod() {
		// get the context from thread local
		Context context = MyThreadLocal.get();
		System.out.println(context.getTransactionId());
	}
}
```

When you run the ThreadLocalDemo file, you'll get the below output:

```java

    Thread-0
    Thread-1

```

As you might see, even though we are not explicitly passing the transaction id, the value can be accessed from the business method and printed on the console. Adding to it, the transaction ID differs for each thread (0 and 1).

Well, that's it. I hope I'd explained it in a simple possible way. Please let me know what do you think about this article in comments. Do leave a comment if you want to add anything to this topic.


This post explains about Java Thread Locals with Sample code.

Java Thread Local - How to use and code sample


\*\*In this post, I'm going to explain how you can setup a Java development environment (JDK Eclipse) in Ubuntu. I'm using Ubuntu 10.10, but these steps should be applicable to majority of Ubuntu versions.

Let's start with JDK first.

## Install Sun JDK:

1.  Download the Linux version of latest JDK binary from the [Oracle website][1]. For Java 6, the file name would be: **_jdk-6u22-linux-i586.bin_**
2.  Copy the downloaded JDK file to a directory where you want to install the JDK. I use ***/home//java/*jdk-6u22-linux-i586.bin\*\***
3.  Open terminal window and navigate to the directory where you copied the downloaded file. Then type the command: **\*sudo sh jdk-6u22-linux-i586.bin** \*and press enter.
4.  If it asks for root password, give it and JDK installation will begin. The JDK will be installed on the same directory where the binary is placed.

[1]: http://www.oracle.com/technetwork/java/javase/downloads/index.html "JDK downloads"

That's it. JDK installation is done. But we still have one more step to complete. That is, setting up the _JAVA_HOME_ environment variable.

## Setting up JAVA_HOME environment variable:

1.  Go to Nautilus file browser (_Places -> Home Folder_) and open this file: **_'.bashrc'_**. By default this file is hidden. So, press *Ctrl H *which will show all hidden files and then you can see the *.bashrc *file.
2.  Add the below code snippet at the end of the *.bashrc *file:
    export JAVA_HOME=/home//java/jdk1.6.0_22
    PATH=.:$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH

    **Don't forget to change the path in first line according to where you installed your JDK**

    - That's it. Log off and Log in again for the changes to take effect. To test whether the installation successful, open Terminal and type *java -version *which should show you the currently installed JDK version.

    ## Install Eclipse:

    Installing Eclipse in Ubuntu is pretty simple. Just [download][2] the ZIP file from Eclipse.org and then unzip it. The installation is done. ![;-)][3]

[2]: http://www.eclipse.org/downloads/ "Eclipse downloads"
[3]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_wink.gif


How to setup Java development environment in Ubuntu?


Here's a small UNIX tip (or how-to) for executing a command in the background. For UNIX gurus, this tip might seem like a basic one. But for guys like me who are coming from a Windows background, even smaller ones makes a big difference.

This is the scenario - I use Putty to login to UNIX. I execute few (internal) UNIX commands which are time thirtsy and take at least 2 hours to complete. While the command is running, I can't do anything in the Putty terminal. All I can do is stare the Putty for 2 hours or do the below, to reuse the Putty session for other tasks while running the time-thirsty command in the background.

- In UNIX shell, type your command and hit Enter.
  $ my-long-running-command
  ...... the long-running command running .....

- Your command will start running. Now press `Ctrl z`. This will interrupt the current process and pauses it. You'll see something like this;
  [1] Stopped my-long-running-command

- Now , type `bg` and hit Enter. Your current process (i.e. the command) will start running in the background. To check, type `jobs` in the command line and hit Enter. You'll see the job status something like this.
  $ bg
  [1] my-long-running-command
  $jobs
  [1]- Running my-long-running-command

So, now you can use Putty for other tasks, while your command executes in the background.


#howto (40)