I currently use Mido from FontSquirrel for headings on this blog. Its basically the same technique. But Google just makes it easier. Also, Google’s font API will be faster and also you can save a handful of bandwidth by not loading the font files from your server.

Google’s API competes directly with the freemium service TypeKit and the still-in-stealth service FontDeck. But, Google’s font directory is still very young and they have only 18 fonts available currently, compared to TypeKit’s 400+ fonts. But, its Google. The font directory will expand rapidly very soon. Also, its free. Who doesn’t love freebies !?

For detailed information about the z-index property and what all can be achieved using it, check out this post on Smashing Magazine. I’m not going to elaborate on that. In this short tutorial, you’ll learn how to use z-index like how 24Ways does.

Demo – Download

Step 1 : Mark-Up

As with any CSS effect, no special HTML mark-up should be added. It should be simple and straight-forward. So, this is the HTML code i’ll be using. No aero-science here. Simple, normal HTML.

	<div id="menu">
		<ul>
			<li><a href="#">2008</a></li>
			<li><a href="#">2009</a></li>
			<li><a href="#">2010</a></li>
			<li><a href="#">2011</a></li>
		</ul>
	</div>
	<div id="site-name">
		<h1><a href="#">gotchance.com</a><h1>
	</div>
	<div id="content">
		<div id="nav">
			<ul>
				<li><a href="#">january</a></li>
				<li><a href="#">febraury</a></li>
				<li><a href="#">march</a></li>
				<li><a href="#">april</a></li>
				<li><a href="#">may</a></li>
			</ul>
		</div>
		<p>Lorem ipsum DUMMY TEXT</p>
	</div>

Step 2 : The CSS

The CSS is pretty elaborate. So, lets take one at a time. Firstly, the top “Years” menu :

#menu {
	display: block;
	z-index: 5;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30px;
}
#menu ul li {
	float: left;
	width: 58px;
	list-style: none;
	padding: 20px 0;
}
#menu ul li a{
	display: block;
	position: absolute;
	top: 0;
	z-index: 5;
	bottom: 0;
	padding: 10px;
}
#menu ul li a:hover {
	color: #000;
	background: #EBBD2B;
}

Here, we’re setting the z-index value for the #menu to 5 (it can be any value). Then, we’re positioning it absolutely. And, by setting the top and bottom values to 0, we make it stretch 100% vertically. The width and padding property on the li is require as a corrective measure. Otherwise, the links will stack up on top of one another.

#site-name {
	position: absolute;
	z-index: 10;
	top: 30px;
	opacity: 0.7;
	-moz-opacity: 0.7;
}
#site-name h1 {
	padding: 0;
	margin: 0;
	font-size: 128px;
	position: absolute;
	z-index: 10;
}
#site-name h1 a {
	text-decoration: none;
}

This should be quite obvious. We’re setting the z-index value for this as 10. So, it will be above our “years” menu. As i mentioned above, we use the opacity property so that the underlying “years” menu will be visible too. It adds to the “beauty” ;-) Also, we’ll be positioning this absolutely too, to enable overlapping.

#content {
	font-size: 16px;
	position: absolute;
	z-index: 15;
	top: 120px;
	bottom: 0;
	left: 0;
	padding: 0 25px;
	background: #000;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}
#content p {
	clear: left;
	line-height: 24px;
	margin-top: 75px;
}

This will be our semi-transparent content area. With a z-index of 15, this lies above the “years” menu and the “site-name”. Also, positioned absolutely.

#content #nav {
	z-index: 20;
}
#content #nav ul {
	display: block;
}
#content #nav ul li {
	float: left;
	list-style: none;
	margin: 6px;
}
#content #nav ul li a {
	color: #ffc000;
	font-weight: bold;
	display: block;
	padding: 10px 14px;
	background: #333;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
}
#content #nav ul li a:hover {
	color: #000;
	background: #ffc000;
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}

This will be a menu inside our content area, again to one-up the “beauty” of the effect. With z-index of 20, this will be on top of all other elements. Positioned absolutely, it is set to overlap with the site-name, semi-transparently.

And, thats it. Voila ! You’ve got a pretty cool-looking webpage. You can tweak around with this technique to achieve way more beautiful results.

Have you used z-index in your layouts ? If so, share with us in the comments. I’m planning to make a series of tutorial posts based around the z-index property. If you’ve a request for a specific effect, let me know.

Demo – Download

Also, earlier when designers used Lipsum, clients used to wonder what it was. But, the practice is very common now that almost everyone knows about Lipsum. I’ve had clients who make simple mock-ups which themselves contain Lipsum.

And more than the normal Lipsum text, nowadays i use the more useful HTML-Ipsum, which wraps the classic Lipsum text with various HTML tags in various formats. What’s your opinion on this ? Do you think Lipsum kills your design ?

Also, i’m available for freelance projects. If you’d like to hire me, get in touch.

And finally, i’ve been working on a couple of web apps recently. I’ll be writing about them soon.

• The image is hosted on their server, not yours.
• It includes a small “?” link that leads back to their website.
• It relies on Javascript. Won’t work if javascript is disabled.
• Limited to the texts “Follow us”, “Follow”, “Follow Me” and “My Twitter”

When Mike left a comment asking if it was possible to get the image hosted on our site, i decided to write a quick tutorial on how to put such a badge on your site without relying on external site.

Personally, I hate to follow tutorials without knowing the outcome. So, check out the DEMO to see what you’ll be creating.

Step 1 : The Markup

The markup is really simple. Just link your image to your twitter account and wrap it inside a div with an id, as follows :

<div id="twitter-badge">
	<a href="http://twitter.com/shrihari"><img src="twitter.jpg" alt="Twitter" /></a>
</div>

That code should go just before the closing body tag : </body>.

Step 2 : The CSS

The CSS is also amazingly simple. Firstly, you need to make sure the an image with a link has no ugly border around it. If you’re using WordPress, chances are high that your theme author has already done this, unless you’re using some spammy theme. Next, you need to fix the position of the image.

img, a img { border: 0; }
#twitter-badge
{
	position: fixed;
	left: 0;
	top: 200px;
}

If you want the image on the right side, you’ve to replace left: 0; with right: 0;

Check out the demo here. If you’ve any questions feel free to drop them in the comments.

Also, unlike the site itself, the contact forms have a width of about 600px so that they’ll look good on all screen resolutions. But then, why is the site wider ? It was actually a wise decision. The target audience of the site itself are blogger and webmasters, majority of whom will be having 1024×768 or greater resolution. But, the target audience of the contact forms are just the general internet users. So, it includes people who have 800×600 resolutions.

The next is that i’ve created a Twitter account for Kontactr. If you’re on twitter, don’t forget to follow @kontactr. And lastly, there is a new feedback forum for Kontactr now. If you’ve any new ideas/suggestions for Kontactr, head over to the feedback forum and post them right away.

What plans i have in mind ?

• To introduce PRO account with ability to remove “powered by Kontactr”, change the “Sent, thank you” message text and some other features.
• In general, add more features for all users.

If you’ve some ideas in mind, drop them at the feedback forum.

No, lets look into the services that OU has to offer. To start with, Opera has provided 8 services.

File Sharing & Photo Sharing

A simple and safe way to share your files between computers. Safe ? As pointed out on a blog, the URL of the OU is not ever https://. And did i tell you that your computer and Opera should be running always, if you want to access your OU service from any other computer. I’d rather choose better alternatives like SkyDrive, Dropbox etc.

Media Player

“Access your complete home music library from wherever you are” Are you kidding ? I’d rather take my music with me, than keeping my home computer running all the time for me to access its music. Of course it allows you and your friends to listen to music collaboratively. But thats sorta silly.

Web Server

This service is the one that really transforms your browser into a web server. It will come in handy when you want to show off a fancy HTML page to your friend without having to upload it to any server. I don’t see any other practical use of it. Home networks and computers are not suited for hosting websites and that is the reason people pay the hosting providers for. Even if your computer is superman and can run 24/7 without any problems, you should choose better solutions like Ubuntu Server and the like, for hosting websites.

The Lounge

This is the only service that i see some sense in. You can chat with your friends online (which everyone does most of the time) without having to rely on Google, Yahoo, MSN and the like. But i don’t see me (or anyone) replacing the favorite messengers with OU yet. Not to mention, i’m damn sure i can’t convince any of my friends to try OU. The obvious question is “Whats the big difference ?”. For an average use, why does it matter at all whether he communicates directly or via a webserver.

These are just the services that Opera offers, to start with. It provides an API for developers to creates services on. But i doubt any of them will be useful enough to convince people to use Opera Unite. So, the answer to the million dollar question “Does Opera Unite really change anything ?” is probably a negative. To the end user, it doesn’t matter whether his computer communites with a webserver or not. Anyway, we’ll have to wait and see what the developers come up with.

Now, whats your opinion ? Do you think Opera Unite will be of any use to you ?

1) Frequent Crashes

Since installing this version of Firefox, the Mozilla Crash Reporter has become my best friend. Its been coming up almost daily to meet me. I know that i’ve installed Beta plugins like Ubiquity and this kind of behaviour is expected. So, this is not my main complaint. But still this kind of crash-on-a-daily-basis is too much for a browser like Firefox. I don’t know why i enter my email address there every time. Though i send a crash report every 24 hours, i do not get any kind of response. Firefox is free software and i know that shouldn’t be complaining about lack of support.

2) Memory Leak

My 2GB RAM Windows 7 system becomes god-damn slow with just Firefox, foobar2000 and Twhirl running. Guess who’s the culprit, it is the people’s (include me) favourite browser Firefox. And i’ve not been crash-testing it with 100 tabs open, 150 addons installed etc. I have about 10-20 tabs open at a time. I have 13 addons installed out of which 5 are disabled, to see if they are the culprit. Others are just very popular ones like Google toolbar, SU toolbar etc. which i’ve been using since Firefox 0.1 (not really).

So how much memory does my firefox use ? The answer is God only knows. It changes every time though i have the same tabs open. When i open Firefox with 10 tabs, the memory usage remains at ~120MB. If i just leave my system idle and go out, i’ll return after few hours to find that Firefox is using ~500MB. Two more hours and it would be ~800MB.

I’ve been resisting myself from writing such a post about Firefox. I did some search and research on the top to see if something specific is causing this or Firefox itself. When i did a google search on the topic i seem to get relevant results for a memory leak as high as 1GB (300MB, 400MB, 500MB, 600MB, 700MB, 800MB, 900MB). But most of them are complaint posts like this or unreplied forum topics. The point is that there is no specific solution. Most commonly suggested troubleshooting step is to check out the list of Problematic Extension. I went through the list in and out and concluded that the none of the memory-leaking extension is on my list.

There are other possible steps like trying to run Firefox in safe mode, reinstalling Firefox etc. But, as a customer i wouldn’t want to go through all this hassle to find out what’s wrong. I’m deeply in love with Firefox, so i’m still clinging onto it. But an average FF user will make the switch to the supposed-to-be-faster Chrome or the faster-in-reality Opera.

Last year when i made a post about a copyright breach, i received immediate response from a Mozilla Staff Member. I hope they’ll pay little attention to this post as well.

PS : If you’re a fan of Firefox, i might have hurt you. I am sorry. Don’t take me wrong. I’m a fan of FF too. In this condition, i wouldn’t be recommending FF to anyone. So, i really hope i find a solution to this.

KISS : The Markup

<input type="text" name="username" />
<input type="password" name="password" />
<input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label>
<input type="submit" name="login" value="Login" />

Keep the markup as simple as possible. The above is one of the simplest markups. If you use email address for logging in, keep the input box’s names relevant like “email” “email-address” etc. Sure, names like “my-site-e” “my-site-login-field” will work. But, Google Toolbar and the like will not be able to “AutoFill” the form. This is a huge usability mistake.

Preserve The Form Order

The order of the form elements goes as above :

1. Username/Email address box
2. Password box
3. Remember me checkbox (if available)
4. Login button

Don’t insert other elements like “Forgot password ?” “Resend Activation” “?” links in between these elements. Place them after the Submit button. But, why ? The usual behaviour of users when they encounter a login form is :

1. Enter the username/email address
2. Hit [Tab] and type password
3. Hit [Tab] and hit [Space] to check the Remember me box (if available)
4. Press Enter to login

When you insert other elements in between, they’re selected by hitting tab. So, users are forced to click-focus on the next element, or hit [Tab] repeatedly. This really spoils the usability. Check out Blellow’s login form, which breaks this order. (In fact, this is what triggered me to write this post.)

AutoFocus The First Field

When you reduce the work of the user, you increase the usability. 99% of the users use the login form for logging in. So, it makes sense to automatically place the I-beam in the first input box on the login page. Examples that come to my mind are Google, Digg, Facebook. Click on the login link and the cursor will be already placed in the username field. It can be easily achieved using jQuery. Here’s how :

$(document).ready(function() {
	$("input[type='text']:first", document.forms[0]).focus();
});

The above code will focus on the first text field in the first form on the page. If you’ve some search form or other form before the login form, you’ve to adjust the index of document.forms[n] accordingly.

Hope the post was useful. As i stated previously, I’m not a usability expert. So, if you have some more tips to improve a login-form’s usability, share with us in the comments.

Now, coming back to WordPress 2.8, i visited the WordPress blog to know about the new features in 2.8. There are some very nice features. My favorite are :

CodePress Highlighting in the Editor : Finally, i need not fire up my PSPad Editor for making small changes to the theme or the plugins.

New Widgets Interface : As i said, i never really had the chance to play with the Dashboard of 2.7, except for on my Demo and local Dev installations. So, the new widgets interface is really nice.

Screen Options : Enables us to set how many items to show per page. I have the habit of manually checking and deleting the comments marked as Spam. So, it is easier when all the comments are displayed in a single page.

Installing Themes from Dashboard : Previously this was possible for plugins. As promised, they’ve added the feature for themes too. Though i’ll never be using this, it’ll be useful for casual bloggers who like to change the look of their blog often.

So, if you’re thinking of updating to 2.8, delay no further. Its a worthwhile upgrade. Use the WPAU plugin to make the process as easy as sipping coffee.

WordPress, sure, is an awesome piece of blogging software. But, why is the search functionality of WordPress so poor ? What are the basic flaws ?

• Search results are sorted according to date, while all search results should be sorted according to relevance.
• WordPress searches only “title” and “content”. While that may be logical for a “blog”, the search SHOULD include comments, author, category etc.. For eg, when i search for “Hari”, it is supposed to bring up all the posts written by me, with the priority being as follows : 1) having “Hari” in title. 2) having “Hari” in post content. 3) having “Hari in comments. and 4) lastly, doesn’t have “Hari but was written by me. But what happens actually ? The top results are the posts which contain the word “sHARIng”. How funny…
• Another example is when i search for “Advertising”, it is supposed to bring up the posts from my Advertising category. But, only one post from that category actually appears in the results. Whether or not the post contains the term “Advertising”, i (a human) have classified it under Advertising. WordPress should give priority to my classification rather than some dumb SQL query.

I noticed that some of the top blogs on my Google Reader have replaced WordPress Search with alternatives.

• TechCrunch – uses Yahoo BOSS
• John Chow – uses Ligit
• Daily Mobile and Make Use Of and tons of others – use Google CSE

Is Google CSE the only Answer ?

Google CSE is a really good service. But, should you use it on your blog ? With the “google”ish layout and the Ads, you completely lose the blog feel of it. Also, for an average blog with many hundred or few thousand posts, the Google search algorithm is not absolutely necessary. You can live with certain changes to your WordPress Search algorithm. For details on tweaking your WordPress search, do take a look at this post.

Do you have any other suggestions to improve WordPress search ? Share with us in the comments.

Things I Like In 7 :

• Aero peek effect. I’m in love with this effect. Though it doesn’t give any functionality more than the “show desktop”, the glass effect is awesome.
• The new taskbar. Even in my Vista, i use a full row of Quick Launch bar with “large icons”. So, this new taskbar is even more useful, atleast for me.

Things I don’t Like

There is nothing much i don’t like in 7, after one day of use. But, i don’t like this thing called “Libraries”. I’m yet to figure out what it is exactly. Also, I miss the “DreamScene” from my Vista.

I’ll post my experience with Windows 7 as i use it more in the following days. For those who’re still in a dilemma as me, i’d happily recommend taking the plunge.

Mario

This has been tested on Windows XP and Vista. But hopefully it should run without a problem on older versions as well. This just includes the first level environment that i created using Mappy. Also, this doesn’t include any interactions with the environment. I’ve also included the source code. So, you can take a look at it too and also use it for your own works. Licensed Open source :P.

3D Design

This may look very very noobish. But after all this is my first go at 3D. I followed this online tutorial to achieve this. Very eager to hear your comments on this one.

The main culprit was the Flash plugin. It makes me shut down Chrome via Task Manager -> Processes, 3-5 times a day. My entire computer appeared to slow down because of Chrome. Also, when I have large number of tabs open and switch from one tab to another, the new tab that I switched to remains blank. And the content slowly appear from the top, like a powerpoint animation.

So, now I’m back and happy with Firefox. So, what I’d like to say to the readers ? If you’re an average Web user, using a browser for nothing more than browsing few pages, then you can very well replace Chrome for IE. But, if you are like me, leaving Flash videos loading on 5 tabs, Java applets on 2, Chatting in 1 tab and Browsing in 10 other tabs, then probably Chrome isn’t for you.

For those who’re thinking of switching back to FF from Chrome, I’d tell you that FF is a lot more than just a web browser. Check out Mozilla Labs. They’ve some ubercool experiments like Ubiquity, Weave, Prism which will really change they way you use a web browser. (Tip: If you’re a developer, check out Bespin project).

As an additional information, I’ll be participating in the Mozilla Design Challenge. Where in the world will I publish my ideas other than this blog of mine ? So, stay tuned.

So, what was I doing all these days ? Actually I did a lot of useful things.

• Learnt Game programming in C++. I already was pretty proficient in C++. I began to use Allegro library. To test my skill, I recreated the first level of classical Mario. It is 80% functional. You don’t know how much excitement it gives you unless you develop your own game :)
• Began to learn Java. Everybody knows that it is one of the important languages to be learnt by every programmer.
• Learnt 3D designing. This one’s using Blender. I know the basics of it now. But am not using Blender much nowadays, because my system has very less memory. Gotta upgrade it soon.
• Bought a Nokia 5800 XpressMusic, after selling my 5310. This touchscreen’s very cool.
• Watched a loooot of English movies. I’ve exhausted almost the entire list of IMDB’s Top 250. Why ? Deep inside I’ve the ambition to direct a movie :)
• Did a lot of freelancing. Most of them are PHP projects. Some XHTML works and some Logo designs. And am still doing. So, if you’re looking for a freelancer, don’t hesitate to contact me.
• Switched back to good ol’ Firefox from Google Chrome. A separate post coming up on why I did this.

So, from now on I’ll be blogging quite consistently. In the past, I covered mostly blogging related topics. From now, I’ll expand this and will be posting about anything Geeky. I assure you that it’ll be interesting.

http://POST-PERMALINK/#comment-COMMENT-ID

This is what it remains like on most of the WordPress blogs. It wouldn’t look bad if you just has a few hundred blogs. But, the latest comment on the latest post (as of now) on Problogger.net has the ID 4452651.

So, I just wanted to change this thing. I wanted to has #comment-1 for the first comment and #comment-7 for the 7th comment and so on. I searched the web for a hack or a plugin, but in vain. (Let me know if one is available). So, I just figured out my own method, which I’m going to teach you. I made it as a hack for a theme, rather than a plugin because it needs you to edit your theme templates. But, as per the principles, you need not touch WordPress’s core files.

Step 1 : Adding the 1, 2, 3 Increment

Open your comments.php file and search for the following :

<?php foreach ($comments as $comment) : ?>

And, change it to as follows :

<?php $i = 1; foreach ($comments as $comment) : ?>

Now, search for the immediate next occurrence of this :

<?php endforeach; /* end for each comment */ ?>

And, change it to this :

<?php $i++; endforeach; /* end for each comment */ ?>

Step 2 : Modifying the Comment’s DIV

Between the above two lines that you modified, resides the code that outputs each comment. So, you’ll find the parent DIV tag. We need to modify its ID. So, find this :

id="comment-<?php comment_ID(); ?>"

And change it to :

id="comment-<?php echo $i; ?>"

Do the same and replace all occurrences of <?php comment_ID(); ?> with <?php echo $i; ?>.

We are almost done now. That is, at this point, if you point your browser to http://POST-URL/#comment-4, it will lead to the 4th comment. But, that is not all. When, somebody makes a comment, he’ll be redirected to the original URL http://POST-NAME/#comment-37456. We’ll tackle that in the next step.

Step 3 : Redirecting to the New URL after Commenting

Scroll to the bottom of your comments.php file and find this line :

<?php do_action('comment_form', $post->ID); ?>

Add the following line after the above line :

<?php gc_comm_id($i); ?>

This line calls the function that we will be defining. It passes our i as the argument. That is, if there are currently 7 comments, i will hold the value 8 for the new comment being posted.

Next, open your functions.php. Create one if it doesn’t exist. Add the following lines to the bottom of the file :

<?php
  function gc_comm_id ($i)
  {
    echo '<input type="hidden" name="gc_comm_id" value="'.$i.'" />';
  } 

  function gc_comm_id_process ($location)
  {
    $gc_comm_id = $_POST['gc_comm_id'];
    $id = strrchr($location, "-");
    return str_replace($id, "-".$gc_comm_id, $location);
  }
  add_filter('comment_post_redirect', 'gc_comm_id_process');
?>

I’ll explain the code to you now. The first function gc_comm_id does nothing but output an invisible field that holds the value of i to the comment form.

The second function, gets the actual redirect URL and then alters it into our new redirect URL containing the value of i. You’ll understand that code if you know a bit of PHP. If you don’t know, you don’t have to bother with it. Just know what it does and that is enough.

Conclusion :

This is just the way that I’ve done it. As usual, if you know a simpler method, do let me know. Also, let me know if there is any plugin available that does it.

This can be achieved by a very simple method. If requires you to edit your .htaccess file in your domain root folder. Simply add this line to your .htaccess :

RedirectPermanent /latest.zip FULL-LINK-TO-THE-DOWNLOAD-FILE

or

RewriteRule latest.zip FULL-PATH-TO-THE-DOWNLOAD-FILE [R=301,L]

You have to update this file with the new link once you release a new version. In my case, it is currently:

RedirectPermanent /latest.zip http://rotatee.googlecode.com/files/rotatee-1.2.zip

This is the way I do it currently. If you know a simpler method, do let me know. And the advantage of using this technique is that you can simply refer as "download the latest version here" and point to this latest.zip link when you write blog posts or anything like that. Also, if you have "Download" links through out your site on many places, you need not update each of them individually. You can simple point them to this link.

Of course, this technique must have some other uses too. But, I can’t think of any, at the moment. If you know, do share with us.