
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

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


How long can a writers block last? My personal record seems to be 6 months.

The last time I wrote something in this blog is on [October, 2015](https://veerasundar.com/blog/rewrite-iterator-generator-example-in-es6/). Between then and now, a lot of things have happened.

- I moved to US for work.
- I got a new job at Visa.
- My office work took most of my free time and the energy.
- The unlimited internet of America spoiled me. :)

I guess those reasons were enough (especially the last one) to justify the inactivity of this blog. But, past is past, I have decided to refocus my efforts of writing frequently in here. I just need to find the content and time to write, like the one I am doing right now, writing about the plan to write.

And, btw, if you haven't noticed yet, I redesigned this blog (if you have noticed, **thanks**). Do let me how does it look. I have also heavily modified the Jekyll blog structure. If you are interested, you can take a look at [the source code](https://github.com/vraa/blog). I'll be writing about the redesign process soon.


Notes about the blog redesign the resumed focus on article writing. 

Resurrecting the blog


One more year has passed and we made it so far after the deadly 2012 end-of-the-world incident. Kudos to us.

As I usually do at the end of each year ([2008](https://veerasundar.com/blog/a-very-happy-new-year-to-all-the-readers-of-dreamz/), [2009](https://veerasundar.com/blog/so-long-2009-welcome-2010/), [2010](https://veerasundar.com/blog/so-long-2010-welcome-2011/), [2011](https://veerasundar.com/blog/looking-back-and-forward/), [2012](https://veerasundar.com/blog/looking-back-and-forward-2012/)), here's the retro post about how things went in 2013 for myself/this blog.

## Last year resolutions

Last time, I decided on three things to do in 2013.

1. **Release treesk.com** - Nope. Didn't do it. Damn, its hard to focus and launch something. But as a consolation, released [countrack.me](http://countrack.me), so _yay!_ for that. :)
2. **Write more** - Kinda worked on it. Started writing few technical articles again in this blog. But not much as I would have liked. Should do better.
3. **Open source timethetask.com** - [Nailed it](https://github.com/vraa/timethetask)! :)

## 2014 Resolutions

1. Stop writing 2013 at first and then correcting it to 2014.

Neh, just kidding. This year, there are no specific resolutions. Instead, there's going to be one objective that I'm gonna apply at all things that I do - be it personal life, career, dreams. That'll be:

> **Go to next level**.

You know, once you get confortable with something, it is hard to get out of that comfort zone. But it is very, very important to move on, try new things, fail and learn. So, 2014 is going to be one such year, where I am gonna try new things and see how they work.

That'll be it. Though it's little late, I take this moment to wish each and every one of you a happy and successfull new year!


Looking back and forward (2013)


Just moved this blog from Wordpress to Jekyll.

Previously, I was using a shared hosting server to run this blog on a Wordpress + MySQL combo. That worked well and it stood solid for the kind of traffic that I usually get (~30K pageviews/month).

But being a web developer, I always wanted to run my own web server and host my blog there. Hence the move.

Now what you read is proudly served from a [Linode](http://linode.com) machine by a [Nginx](http://nginx.org/) server with the static HTML pages generated by [Jekyll](https://github.com/mojombo/jekyll) and version controlled at [Github](https://github.com/vraa/blog). Neat, huh!?

The move was not easy though. I had around 300 posts in my wordpress. Some of the posts are not so much useful or became obsolete now. So, I had to to nitpick which one to move to the new platform. Google Analytics helped a bit to decide on the top performers. I kept my own favorites untouched. Rest of the posts were axed.

Also, the Wordpress to Jekyll converter plug-in did a good job of reformatting my blog posts to suit the Jekyll structure. But it messed up with some of the posts and I had to manually skim thorugh the content to fix things up. So, if you see any formatting issues, please let me know about it and I'll fix.

As part of passing the knowledge torch, here's the list of steps that I did to switch the blogging platform.

## How you can move from Wordpress to Jekyll?

First of all, if you new to Jekyll and you are confused with the offical definition '_Simple, blog aware, static site generator_', here's my version of explaining Jekyll to you (either to confuse you more or give you a clear idea).

> Jekyll is a program written in Ruby. Unlike Wordpress, you run Jekyll in your local machine, not on your web server. Unlike Wordpress, Jekyll does not give you admin panel or anything. Unlike Wordpress, you do not need a MySQL database to store your post content. Unlike Wordpress, you can't simply upload images and expect them to be available for your posts. You need to host images in somewhere else (or your own server) and you need a URL to include it in your posts.

All Jekyll does is that it converts your posts, mixes them with template files and finally generate a static, plain, old HTML files which you can host at any web servers.

Jekyll is not for weak-hearted.

If you are familiar with JavaScript templates such as _Mustache_, _Dust_ in which you define templates with placeholder for data and you pass JSON to prepare the final content, Jekyll is exactly that - you define your page structure (templates) with placeholders for content and you write your posts. When you run Jekyll, it will insert your posts in the placeholders and spit out complete HTML files.

So, here's what you should do if you want to switch.

### Phase 1: Install Jekyll in your local machine.

1. Install Ruby.
2. Install Jekyll.
3. If not already done, Install Git.
4. Clone any existing Jekyll sites, so that you don't need to create _everything from scratch_. [Tom Preston-Werner](https://github.com/mojombo/mojombo.github.com) is a good starting. Here's [mine](https://github.com/vraa/blog), forked from Tom Preston's and modified to suit my blog.
5. Get familiar with the Jekyll folder structure.

### Phase 2: Convert Wordpress posts to Jekyll posts.

1. Take backup of your current wordpress blog (very, very important).
2. Install this plugin - [Wordpress to Jekyll exporter](https://github.com/benbalter/wordpress-to-jekyll-exporter/archive/master.zip) - _zip_ file.
3. In Wordpress admin panel, go to Export and export your posts to Jekyll. The plugin will create a zip file which will be downloaded.

### Phase 3: Create your blog in Jekyll

1. Copy the converted wordpress posts (which are in Markdown format) to Jekyll's `_posts` folder.
2. Familiarize yourself with [Markdown syntax](http://daringfireball.net/projects/markdown/syntax).
3. Make sure the content of your posts are properly formatted in Markdown. If you had code block in HTML, XML then you'll definitely have problems. Review those posts once again and copy the correct content from your backup.
4. If you are using Windows and your posts are in UTF-8 encoding, make sure the files do not have _BOM_ character in its header. If BOM is there, then Jekyll conversion will not work as expected. You can use [UTFCast](http://www.rotatingscrew.com/utfcast.aspx) to convert your files to UTF-8 format with out BOM (make sure you uncheck _write BOM_ while converting).
5. Go wild and design your blog as per your taste. Run Jekyll in auto refresh mode to see the changes you make immediately reflected in browser: `jekyll --auto --server`.
6. Once done, the final blog will be available in `_site` folder. Take the content and host them anywhere you want.

### Phase 4: Version Controlling & Auto publishing.

So far, if you make any changes to your blog, you have to manually FTP the changes to your hosting server. But there are [nice tricks](https://github.com/mojombo/jekyll/wiki/Deployment) available that helps to automate this step. Use them and create awesomeness.


Moving from Wordpress to Jekyll


First of all, let me say a BIG THANKS to all my readers who visited, read my posts, commented,  sent me emails, joined my network, subscribed to my posts  (and _some times_ clicked on the ads ![:)][1] ). Because of all your positive feedback, this blog turns **2 year old** in this month (June 3rd to be exact) . Thank you again, my readers.

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

![second birthday][2]

[2]: https://veerasundar.com/img/2010/06/second-birthday.jpg "second-birthday"

It was a wonderful experience to be blogging for the past 2 years. It earned me several good friends and it gave an unique identity for myself in the cyberspace. I used to be so happy when people read my tutorials and email me to clarify their doubts. I hope I responded to all of them usefully. At that time I used to feel like I built something that is \*little\* useful to other folks. I pledge that I'll continue to do the same.

## Time for some numbers:

![blog stats for veerasundar.com/blog][3]

[3]: https://veerasundar.com/img/2010/06/blog-stats-2010.png "blog-stats-2010"

category

1st year

2nd year

Extra

Page views

64379

272,614

(_Source_: WordPress Stats)

Alexa rank

350, 468

276,900

[Alexa Link][4]

Feed subscribers

68

276

[Subscribe][5]

Google Page Rank

3

2

(_Source:_ Google)

Thank you once again. Please let me know what do you feel about my blog and how I can improve from here. Your comments are well appreciated.

[4]: http://www.alexa.com/siteinfo/veerasundar.com "Alexa stats for veerasundar.com"
[5]: https://veerasundar.com/feed.xml "Subscribe to my blog!"


Thank you my readers! This blog turns 2 year old!!


2009 is one of those unforgettable years in my life, both at personal and professional levels. Some success, some failures, some struggles and some achievements - overall, 2009 had been a well balanced in terms of events. Well, I'm not going to discuss all of those here because if I do, you might click on the 'ËœX' on the top-right of your screen. Instead, I'll just record some of my thoughts that are related to this blog alone. Let's start:

## I was more active in blog than the previous year:

Yes, I was. You can see that yourself by looking at the **post count** in the Sidebar _Archives_ section. Out of the **175 posts** that I published till now, **121 posts** were published this year. [July 2009][1] tops the ranking with 18 posts!

[1]: https://veerasundar.com/blog/

## My Blog performed very well in 2009:

My active blogging was reflected by the good amount of traffic that my blog recieved. Here's a snapshot of my blog's traffic stats from WordPress.

[![Blog Traffic Stats][3]][3]

[]: https://veerasundar.com/img/2009/12/blog-stats.png

And my post '[Closing the last tab in Firefox 3.5][3]' was one of the popular post with more than 8000 views this year, while my other article '[15 creative Java applications based on Netbeans platform][4]' was [featured][5] in Netbeans.org home page.

[3]: https://veerasundar.com/blog/closing-the-last-tab-in-firefox-35
[4]: https://veerasundar.com/blog/15-creative-java-applications-based-on-netbeans-platform
[5]: http://twitter.com/vraa/status/5863043226

## 'ËœUnited' stats for veerasundar.com/blog:

Well, I meant the 'Ëœcombined' stats, not USA! anyway, here's the comparision between my [last year's stats][6] and the current year's.

[6]: https://veerasundar.com/blog/a-very-happy-new-year-to-all-the-readers-of-dreamz

stats for what?

2009

_2008_

**Views**

172,932

_21,000_

**Number of Posts**

175

_54_

**Comments**

780

_180_

**RSS Subscribers **- **[Subscribe!][7]**

200

_28_

**Google Friend Connect Members**

16

_N/A_

**Spam comments!** ![:)][8]

4032

_854_

That's some good stats, isn't it?

[7]: https://veerasundar.com/feed.xml
[8]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

## On the Dev side, I released 3 apps:

While I was working/blogging hard, I was also spending some time to realize my ideas. I released three applications, well each of them were developed using different technology. Here are they for you:

**[CSS Sorter][9]** is a Java application that sorts the CSS rules alphabetically.
[![][11]][11] **[Timelinr][11]** is a PHP based web application to create timelines online.
[![][13]][13] **[Stockr][13]** is a Firefox extension for tracking share prices online.
[![][15]][15]

## Thank you, my Readers! YOU made this possible:

Yeah, all these numbers were came true, only because of **you, my readers**. I thank you for supporting me through out this year and I **wish you a happy and prosperous new year 2010**. lets welcome the new year together! ![:)][8]

[9]: http://csssorter.appspot.com

[]: http://csssorter.appspot.com
[11]: https://veerasundar.com/timelinr
[]: https://veerasundar.com/timelinr
[13]: https://addons.mozilla.org/en-US/firefox/addon/52363/
[]: https://addons.mozilla.org/en-US/firefox/addon/52363/


So long 2009, Welcome 2010!


It was June 2008, when I decided to go for my own website. Before that, I was having my blog  at [Blogger.com][1]. But, I was always looking forward to a own a domain, mainly for building a identity for myself in web. So, I started this website and the blog, during the month of June 2008. From then, this website has grown from zero to what it is now. In this month, this blog has **completed one year** of existence. So, it's time to look back and analyze how this blog has been performing.

[1]: http://blogger.com

## Some statistics for **veerasundar.com/blog**

From the time I started using WordPress as my blogging platform, I've integrated WordPress Stats plug-in to track my website readers. Below is a snapshot of my reader's trend from WordPress Stats.

![stats for Veerasundar.com/blog][2]

[2]: http://i187.photobucket.com/albums/x201/talktoveera/veerasundar-com-stats.png

- **Total Number of Visitors : 64,379** (till June '09)
- **Google Page Rank : 3**
- **Alexa Traffic Rank : 350,468** [[link]][3]
- **Number of RSS Subscribers: 68** (as per Jun 27 '09) [[Subscribe]][4]

[3]: http://www.alexa.com/siteinfo/veerasundar.com "Alexa traffic rank for veerasundar.com/blog"
[4]: https://veerasundar.com/blog/feed "Subscribe to this blog"

As you can see, even though there are some spikes and lows, my blog readership numbers are increasing steadily, which is a good news to me. This wouldn't be possible with out **you**. So, **thanks a lot, my readers,** for your continued support to this blog.

## Time changes, so does my blog theme!

If you are a frequent visitor to my blog, you would have noticed a BIG change in the look and feel of this blog. YES! I've changed the blog theme, again. I've waved good bye to the image-rich [Arclite theme][5], to welcome a neat and minimalistic theme [Oulipo][6]. The new theme sports a very clean white look and fixed sidebars in both side. I like this theme very much and I hope (note 'Ëœ**hope'**) that I'll be using this theme for some time.

[5]: http://digitalnature.ro/projects/arclite/ "Arclite - Free wordpress blog theme"
[6]: http://www.andreamignolo.com/oulipo "Oulipo - Free wordpress theme"

That's it for now. I once again thank you for your support. Please let me know what you feel about my blog and the new theme!


Thank you, my readers! - this blog turns one year old!


Custom fields are the user defined information that are assigned to any blog post in WordPress. They are also called as **meta-data**. Blog authors usually define the custom fields when they write the blog post to give some extra information like mood, whether,etc. Custom fields are **key/value** pairs, that means you can define any key and assign any value to this key. To know more about custom fields check out [WordPress.org][1] site. With this explanation, it is easy to control the ad presence in your blog post easily with custom fields.

[1]: http://codex.wordpress.org/Using_Custom_Fields

### Control ad presence in blog post with custom fields

As a blog author, you may want to include ad in some of your blog posts and may not want to have ads in other blogs. But it will be tedious to make a code change every time you post a blog. So we are going to define a custom field `$show_ad` and in the blog template we will check for this custom field. And, if it is YES we will include the advertisement and if it is NO or NULL we are not going to insert the advertisement.

### Code changes to check for a custom field

1.  Open the _single.php_ wordpress template file
2.  Search for the text `the_content` and after this line, insert the below code. This will put the advertisement in the bottom of every post. If you want to place your ad on top of every post, copy below code above to the `the_content` line.
3.  _Code to be inserted_

4.  Save the changes.
5.  After this, when ever you want to insert ad in your blog post, just define a custom field `show_ad` and give it a value 'YES'. Your ad code will be inserted to this post alone. If you don't want to insert ad, just don't define any custom fields. So simple, isn't it?


Using wordpress custom fields to control Ads in your blog


This post is a tutorial on how to start your web site/blog. I am explaining it from the basics, so that it helps everyone.

This tutorial has two tracks - one is for the people who are willing to spend money for their web space and the other track is for the people who wants it FREE (Yes! for Free. ![:D][1] ) So, here it goes.

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

### I can spend money for my web identity!

1.  As you are ready to spend some bucks, you have hundreds of options out there. First thing you need to decide is what you are going to start - is it a **blog or web site**. Nowadays most of the people have both blog and web sites in a single domain. So, its good to go with both.
2.  Now **choose a domain name** for your web site. Its very important that choosing a good name for your domain. If you are planning for a personal web site, you could name it as your name (eg, veerasundar.com). If you are planning to make money from your web site, then the domain should match your web content! This step is very important in getting traffic (I mean the people!) for your web site. Once you decided on the domain name, you could use web service like to check the availability of the name. This service also tells you who owns a domain name if it has already taken.
3.  Now **buy the domain. **There are numerous providers out there, selling domain names. For example, [Godaddy][2] is a very famous one. A .com domain usually costs about 250 RS and a .in domain costs around 500 RS. (.in was one of the dead [cheap domains][3] three months back, but now its costlier than .com domain. Economy kills the web business also! ![:(][4] ) I am using [eWebGuru][5] for my domain names. ( I own three domains! ![:D][1] )
4.  Next step is to **buy the web hosting service**. Again, numerous providers and multiple plans out there. Choosing a hosting plan is depends on what you want to put on your web site. All the hosting companies must have their plans listed on their web site. Go through it and choose accordingly. Below are the specifications for my web site. (its from [eWebGuru][5])
    - Web space : 20 MB
    - Monthly Transfer bandwidth : 1 GB
    - Number of Database allowed : 2
    - Price : 1000 RS/Year
5.  While buying the web hosting, you can either buy a Domain name at that time or you can use your own domain name, if you have already bought one. In my experience its **good to buy both the domain name and web space from the same provider**, so that you will get good support for any problem.
6.  Once you bought the hosting service, you will be receiving the web site address (ie. the domain name) and IP address, FTP user name and password. Most of the providers using [CPanel][6] for managing the web sites. You will be given access to CPanel through which you can manage your web space. (Adding databases, creating sub domains, viewing logs are done through CPanel)
7.  Now you got web site name and space for your web site. Its time to put some thing on your web site. You can check out this site [Open Source Web Design][7] to get templates for your web site. Or just google for the word Web templates and you will be flooded with results. ![:D][1]
8.  Now you need to FTP the design to your web space. There are commercial FTP clients are available, but I use [WinSCP][8] which is free, open source and reliable. Use the FTP address given by your provider to connect to your web space and transfer your design/data.
9.  That's it about creating your own web site/blog.

[2]: http://www.godaddy.com
[3]: http://www.hostingobserver.com/cheapest-domain-host.php
[4]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_sad.gif
[5]: http://client.ewebguru.com/aff.php?aff=1352
[6]: http://www.cpanel.net
[7]: http://oswd.org
[8]: http://winscp.net

### I want it free! (I am a poor guy, you know! ![:-(][4] )

1.  As you are not willing to spend money for your web identity, below steps will explain you how to use free hosting services for your blog. This post mainly focused on Blogs rather than web sites.
2.  The popular Free blogging services are **[Blogger][9], [WordPress][10] and [Livejournal][11].** You need to open a account in the blogging service you want.
3.  Once you opened your account, then creating a blog is a child's play. Just follow the instructions, then you are done.
4.  One point here is, your domain name will include the blogging service provider name. For example, my blogger blog is [www.veerasundar.blogspot.com][12] and my wordpress blog is [www.veerasusndar.wordpress.com][13]. This is not the case if you buy the domain. ![:D][1]
5.  In my personal opinion, Blogger is a very good service for starters. It allows lots of customization to be added in your blog. And it is from the Google GOD, so it rocks! ![:P][14]
6.  Consider [WordPress.org][15] for running your blog on your own web space.

[9]: http://blogger.com
[10]: http://wordpress.com
[11]: http://livejournal.com
[12]: http://www.veerasundar.blogspot.com
[13]: http://www.veerasusndar.wordpress.com
[14]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_razz.gif
[15]: http://wordpress.org


#blog (12)