Technabled

QuickTip: How To Prevent Google Analytics From Tracking Your Visits in Wordpress

2011-12-04T08:03:00.001+05:30

Google Analytics is the web's most favorite tracking application used by millions. They are also rolling out real-time analytics. But if you're the admin of a site and you're testing several features of a site, you probably won't want to a track your visits. Here's how you can do that in Wordpress.Google Analytics' tracking code is inserted inside the <head> tag. So, you can restrict this insertion using the following codes in your theme's header.php file:


<?php
if(!current_user_can('edit_users')):
?>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_setDomainName', 'domain.tld']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<?php endif; ?>

This is pretty simple: it checks whether the logged in user is admin. If not, it inserts the tracking codes. You can find more about Roles and Permissions in Wordpress. Note: Do change UA-XXXXXX-X and domain.tld with correct values.

Freebie: Social Port WordPress Plugin

2011-09-16T06:43:00.000+05:30

SocialPort is a social-media Wordpress plugin that lets readers easy access to social-media bookmarking sites. It's just like bookmarking buttons — but what makes it stand out is that it adds a fixed port containing all the links. No matter how lengthy your page is, SocialPort sticks to the page. To make it unobtrusive, I have added an option for the readers to hide the port. This happens to be my first ever WP plugin! So, it's probably simpler in the way it works.

Demo Download

Installation

The ZIP file contains social-port directory. Extract the directory and upload the entire directory to your plugins directory in wordpress installation. (The plugins directory is inside wp-content/ directory)Now, in your WordPress Dashboard, go to Plugins. You'd find Social Port appearing among the list of plugins. Just activate it clicking the link.

Admin Section

Once Social-port is installed, you can access the admin section inside your plugins menu in WordPress Dashboard.

The admin section comes with a host of options to control how Social Port acts

1. SocialPort comes in three vibrant colors. You can choose from Orange, Black and Blue.
2. You can decide on what text you'd like to show beside the buttons.
3. You can link the RSS button to your Feedburner feed address. You can leave it blank if you want to link to the default feed address.
4. The toggler can be positioned either at Bottom Right or at Bottom Left.
5. You can let readers open a new tab/window if they click the links. Leave it unchecked to open links in the same window/tab.

Removing Links

Social Port comes with links to 7 popular social-sharing sites. If you want to remove buttons of any of them, you can do so by changing the socialport.tpl file. You can find it inside the tpls directory.

The buttons are stacked this way:

<!--Twitter Button Start-->
<div class='social-port-button twitter'>
	<a href="http://twitter.com/home/?status=[+title+]+[+permalink+]" title='Share this on Twitter' [+target_window+]>Share on Twitter</a>
</div>
<!-- Twitter Button End -->


<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

<!-- Facebook Button Start -->
<div class='social-port-button facebook'>
	<a href='http://facebook.com/share.php?u=[+permalink+]' title='Share with your friends on Facebook' [+target_window+]>Share on Facebook</a>
</div>
<!-- Facebook Button End -->

<!-- Digg Button Start -->
<div class='social-port-button digg'>
	<a href='http://digg.com/submit?phase=2&url=[+permalink+]&title=[+title+]' title='Share this on Digg' [+target_window+]>Share on Digg</a>
</div>
<!-- Digg Button End -->

<!-- Delicious Button Start -->
<div class='social-port-button delicious'>
	<a href='http://del.icio.us/post?url=[+permalink+]&title=[+title+]' title='Save this on Delicious' [+target_window+]>Share on Delicious</a>
</div>
<!-- Delicious Button End -->

<!-- Reddit Button Start -->
<div class='social-port-button reddit'>
	<a href='http://www.reddit.com/submit?url=[+permalink+]' title='Share this on Reddit' [+target_window+]>Share on Reddit</a>
</div>
<!-- Reddit Button End -->

<!-- LinkedIn Button Start -->
<div class='social-port-button linkedin'>
	<a href='http://www.linkedin.com/shareArticle?mini=true&url=[+permalink+]&title=[+title+]' title='Share this on Linkedin' [+target_window+]>Share on LinkedIn</a>
</div>
<!-- LinkedIn Button End -->

<!-- Feed Button Start -->
<div class='social-port-button feed'>
	<a href='[+feed_url+]' title='Grab the feed'>Grab the feed</a>
</div>
<!-- Feed Button End -->

So, for instance, if you'd like to remove the StumbleUpon button, you can remove the following lines:

<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

Sources, Credits and Support

The icons are from here. Please use the comment section for issues related to this plugin. While I cannot guarantee full support, I would try my best to help you. Cheers!

HOW-TO: AJAX Search Suggestions in Input Fields

2011-08-23T21:41:00.002+05:30

Today we are going to create AJAX search suggestions inside input text fields. This is different from AJAX Auto-suggest or AJAX Live Search. The idea is simple — we are going to show the user suggestive terms as (s)he types. When the user hits the enter key, the suggestion is sent as the query. This feature was there in Google's search-box before they launched Google Instant search. (I recently added this nice feature on PulsePro's Admin Panel.) Let's build it together!

Demo Download

What we need

All we need is PHP 5 and a simple database table to search. For the purpose of this tutorial, let us create table called world. You can find the SQL for the table here at MySQL's site or download the source files of the tutorial. (If you're super beginner with MySQL, here's how you can set this up.) Note that the database is pretty big so it may take some time to execute the SQL commands.
There are three tables inside the world database. We only need the city table for this tutorial. The structure is like the following:

We are going to let the users search the city names. So, the Name field is our hero!

CSS Files and Structure

By the time we end this tutorial, the directory structure would be like this:

In index.php file, we add the following lines:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Search Suggest in Textfield</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='searchSuggest.js'></script>
<link rel='stylesheet' href='style.css'></link>
</head>
<body>
<div id='wrapper'>
<form action="http://google.com/" method='get'>
	<div class="infoWrapper">
		<div class="infoTitle">Search Cities</div>
		<div class="infoContent">
			<input type="text" id="redText" disabled="disabled" autocomplete="off" value="" class='text long'/>
			<input type="text" autocomplete="off" id="search" value="" name="q" class='text long search'/>
		</div>
	</div>
	<div class="infoWrapper">
		<div class="infoTitle"> </div>
		<div class="infoContent">
			<input type="submit" value='Google Search' id='search_button' />
		</div>
	</div>
</form>
</div>
</body>
</html>

This is fairly simple file. The only thing that needs attention is the presence of a disabled input element. We are going to place this disabled input field behind the text input where the user actually types. Also note that we have turned off autocomplete. This is to prevent any unwanted text suggestions that the browser may show.
But how on earth could we possibly put the disabled text field behind active text input? Well, the following CSS (inside style.css) will do the magic.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-size: 14px;
line-height:1.3em;
text-align:center;
font-family:Arial, sans-serif;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}

/**
Generic Form styles
**/
.infoWrapper {
	clear:both;
	margin-bottom:10px;
}

.infoTitle {
	color:#808080;
	float:left;
	width:230px;
	text-align:right;
	margin-right:5px;
	line-height:29px;
}

.infoContent {
	padding-left:130px;
	text-align: left;
}

.text{
    border-color: #CCCCCC #C3C3C3 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    margin-right: 4px;
    padding: 5px;
}

.text.long {
	width:350px;
}

/**
Form Elements
**/
#redText, #search {
	background: none repeat scroll 0 0 transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}

#search_button {
	margin-top:10px;
}

The first few lines (up to line 23) are to reset browser specific styles. (It's a good practice to use these styles in almost all HTML files.) Then, there are some generic form styles to prettify our form. What needs attention is here:

#redText, #search {
	background: transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}

redText is the id of the disabled input and search is the id of active input field. We have positioned both absolutely. This makes one overlap on the other. Next, we set the z-index of disabled input less than the active input. This brings the active input to the front. The other property to notice is that we are forcing the user to type in lowercase (text-transform: lowercase). It's not a good practice but this makes things easier for us developers (at least for this tutorial).

Server Side Data Handling

Now, we are going to work with ajax.php.

<?php
//connect to mysql and select db
mysql_connect('YOUR_HOSTNAME', 'YOUR_USERNAME', 'YOUR_PASSWORD') or die("Cannot connect to database!");
mysql_select_db('world') or die("Cannot select database!");

$result = array();
$search_text = urldecode(filter_var(trim($_POST['q']))); // $_POST['q'] is the search string which user types. It is sent via ajax
$q = "SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'";
$r = mysql_query($q);
if(mysql_num_rows($r)>0){
	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];
}
echo json_encode($result);
?>

Here we first connect to MySQL and select the world database. (Make sure you change YOUR_HOSTNAME, YOUR_USERNAME and YOUR_PASSWORD with proper credentials.) Then we create an empty array $result. We also santize the search string with filter_var. Next we query the City table with:

SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'

This SQL statement finds the rows whose Name field starts with the search string. In case of several matches, we just need the first match. So we find the first match and set the suggestion with:

	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];

Finally, we encode the array as a JSON output.

JavaScript

Next we move to searchSuggest.js and put the following code inside it:

$(function(){
	$("#search").keyup(function(e){
		$this = $(this);
		$searchBtn = $('#search_button');
		search_text = $this.val();
		$('#redText').val('');
		if(search_text){
			$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});
			$.ajax({
				url: "ajax.php",
				type: "post",
				dataType: "json",
				data: "q="+encodeURIComponent($this.val()),
				error: function(){
					// pass
				},
				success: function(obj){
					$("#redText").css({"background-image":"none"});
					if('suggestion' in obj) {
						if(obj.suggestion!=null){
							$('#redText').val(obj.suggestion);
							if(e.keyCode === 39){ // right arrow key pressed
								$('#redText').val('');
								$this.val(obj.suggestion);
							} else if(e.keyCode === 13) { // enter pressed
								$("form").submit();
							}
						}
					}
				}
			});
		}
	});
	
	$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});
});

Lot of code. Let's break this down into smaller parts. First, when the user types into the text-field, we clear out the disabled text-field (#redText) where we are going to place the suggestions. Then, as the user types and as we make an ajax request, we show an animated loading image at the right side of the input field, with the following line:

$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});

Then, we make ajax request to ajax.php, which we already created in the last step. Note that we didn't do anything if we fail to make ajax call (the error property of ajax call). This is because we don't want to interrupt the user while typing. When we receive ajax response, we first hide the animated background. Then, we check if there is at all any suggestion sent via ajax (i.e. if there is any City name matching the typed characters). The following codes are important here:

if('suggestion' in obj) {
	if(obj.suggestion!=null){
		$('#redText').val(obj.suggestion);
		if(e.keyCode === 39){ // right arrow key pressed
			$('#redText').val('');
			$this.val(obj.suggestion);
		} else if(e.keyCode === 13) { // enter pressed
			$("form").submit();
		}
	}
}

If suggestion exists, we set the value of the disabled input text (redText) to the suggestion. Next, we go a bit further and do something more. If the user presses the right arrow key, we set the value of the active text field to the suggestion. Again, if the user presses Enter key, we submit the form.
So, what happens if user submits the form?

$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});

We first check if there is any suggestion. If there is, we set the value of the active text field to the suggestion and set the search query (q). If there is no suggestion, search query is the same as the text user typed in. Then, we take the user to the Google search page for the search query.
Of course, if your site is http://example.com and your search results page is http://example.com/search, the last step would be something like:

location.href = "http://example.com/search/?q="+q;

And that's all! Hope you enjoyed the tutorial. Don't forget to check out other tutorials and subscribe to the feed!

PulsePro Vote Component with Admin Panel

2011-08-17T15:39:00.004+05:30

It's been almost a month since I released a premium version of PulseLite — the open source PHP AJAX Voting component. It has got plenty of features. The documentation lets you integrate this component with your existing web-site. If you are building a web-application (or has an existing one), PulsePro is the perfect choice to let your users interact with your application. What makes PulsePro stand out from other vote-components is its ability to let users cancel votes — just like Reddit, YouTube, Facebook Like, Google +1, StackOverflow among many other popular web-applications.

Here are some of the features PulsePro comes with:

Easy to install.
Secure and XSS-proof.
Five different styles to match your web-application.
Prevents multiple voting.
Cross-browser compliant.
Comes with an Admin Panel that lists top voted items and more.
Ban IP addresses.
Enable/Disable voting on certain items.

If you have a web-site or web-application, you may want to let your readers/users vote on items. Not only that, you may want to check how your posts/items are performing, which are the most popular ones, which are the least. The admin area that comes with this component is perfect for this purpose. If some items are performing bad, you know where to improve. In short, PulsePro lets you check the pulse of your application!

Demo

Freebie: Clean AJAX Contact Form

2011-07-01T07:31:00.000+05:30

Building on top of the AJAX Contact Form and modifying one of Wufoo's elegant forms available at the gallery, I made a more secure, easy-to-install AJAX Contact Form with more features. It's available for download and takes just a couple of minutes to configure and get it running. Perfect for your website — whether personal or professional.

Demo Download

Features

AJAX Form Validation
XSS-proof
Super easy to install. Just edit a configuration file and upload.
Open Source. Fully customisable.
HTML5 Features
Cross-browser compatible
No database required. PHP 5.2+

Installation

Download the zip file and unpack. Edit the config.php file. You'd need API keys from reCAPTCHA. Under My Sites, create a new site and check the field that says Enable this key on all domains (global key). Note the public and private keys. Edit the PRIV_KEY and PUB_KEY values in config.php. Also, edit the email-address and subject line. Upload the files to your server and it's ready! (Also, replace images/cflogo.png with your logo.)

Mail Format

When someone fills in the contact form and sends message using this form, you'd receive a mail with the following information:

Sender's Name
Sender's Email
The body of the message
IP Address of the sender
Time and Date when the message was sent

Troubleshooting

If you do not recieve mails, it's probably the server settings. Ask your server administrator.

Customizations

If you need any customization, you can mail me for a quote.

How to Create an AJAX Contact Form with reCAPTCHA

2011-06-28T10:46:00.006+05:30

Today we are going to create a nifty contact form powered by AJAX and reCAPTCHA. reCAPTCHA, now acquired by Google, was a project by Carnegie Mellon University that aims to stop bots from spamming websites. reCAPTCHA serves more than 200 million captchas everyday. It is almost impossible that you have not been challenged to type those distorted wavy words.

Did you know? reCAPTCHA words are case-insensitive. In most cases, while typing the words, we find it hard to capitalize certain characters. Well, we can just get away without capitalizing. The words entered by humans are used to digitize books. The words are from scanned old books. You can learn more here.

Download Demo

Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.

Get The Keys

We would need API keys from reCAPTCHA to show captchas. You can sign in with your Google account at reCAPTCHA and get a pair of API keys after adding a domain. (It is not necessary to own a domain, just check the the field that says "Enable this key on all domains (global key)" and the keys will work on all domains.) The first key is a public key, served via javascript and the second one is a private key to handle server-side requests. Also, download the reCAPTCHA PHP library.

Layout

Once we are ready with the keys and the library, let's begin building the form. The form we are going to create will be simple and easy to navigate. Here is how the layout is made:

First, we create an index.php file and put the following lines of code inside it.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Contact Form With reCaptcha</title>
<style type='text/css'> 
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}
 
#wrapper {
width:600px;
margin:0 auto;
text-align:left;
padding:6px;
}

.message {
 text-align:left;
 width:100%;
 padding:15px 22px;
 display:none;
}

.loader {
 background:url("images/ajax-loader.gif") no-repeat center left;
}

.success {
 background:url("images/success.png") no-repeat center left;
}

.error {
 background:url("images/error.png") no-repeat center left;
}

.infoWrapper {
 clear:both;
 margin-top:10px;
}

.infoTitle {
 color:#808080;
 float:left;
 width:110px;
 text-align:right;
}

.infoContent {
 padding-left:130px;
 text-align: left;
}

label {
 cursor:pointer;
}

.input-text {
 border:1px solid #808080;
}

.long {
 width:450px;
}

.tall {
 height:150px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div id='wrapper'>

<h4>Contact Us</h4>
<div class='message'>

</div>

<form name='contact' id='contact'>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='name'>Name</label>
  </div>
  <div class="infoContent">
   <input type="text" name='name' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='email'>Email</label>
  </div>
  <div class="infoContent">
   <input type="text" name='email' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="message">Message</label>
  </div>
  <div class="infoContent">
   <textarea name='message' id='note' class='input-text long tall'></textarea>
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="">Are you human?</label>
  </div>
  <div class="infoContent">
   <!-- reCAPTCHA code goes here -->
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle"></div>
  <div class="infoContent">
   <input type='submit' value='Send Message'/>
  </div>
 </div>
</form>
</div>
</body>
</html>

Now, that's a lot of code that needs to be explained.

The first few CSS styles inside the <style> tag are pretty self-explanatory. The message class is shown at the top of the form when it is submitted. The error, success, and loader classes are to identify the kind of message shown. We will add the classnames via jQuery.
Each section inside the form is wrapped inside infoWrapper class. The labels are the wrapped in infoTitle class and each input field in infoContent class. The other classes (input-text, long and tall) are to prettify the form-elements.
We have also added jQuery javascript library and a functions.js file (we would later create).
We have added an empty div with message class. The text will be filled in and determined via AJAX.
The form, as explained earlier, is simple and minimal in its approach.
Note that we have commented the section where we are going to put the reCAPTCHA code.

Integrate reCAPTCHA

Now that we have the form, it's time to integrate reCAPTCHA. We add the following lines of code at the top of the index.php file:

<?php
include_once("recaptchalib.php");
define("PUB_KEY", "YOUR PUBLIC KEY HERE");
?>

recaptchalib.php is the PHP library. Of course, you need to replace "YOUR PUBLIC KEY HERE" with your actual public key. Next, we add the following codes inside the form where the reCAPTCHA codes should be (the commented section, remember?)

<?php echo recaptcha_get_html(PUB_KEY); ?>

Now, if you reload the page, reCAPTCHA words should be there. Next we are going to handle the form response via ajax.

Server Side

We create an ajax.php file and inside it, we put the following lines of code:

<?php
require_once('recaptchalib.php');
define("PRIV_KEY", "YOUR PRIVATE KEY HERE");

$name = filter_var($_POST['name']);
$message = filter_var($_POST['message']);
$email = filter_var($_POST['email']);

if(in_array('', array($name, $message, $email))) {
//one (or more) of the required fields is empty
$result = "field_error";
} else {
 $resp = recaptcha_check_answer (PRIV_KEY, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
     //Captcha was entered incorrectly
  $result = "captcha_error";
   } else {
     //Captcha was entered correctly
     $result = "success";
     //You can enter your mail functions here. It's like:
     // mail("yourmail@domain.com", "Email Subject", $message);
 }
}

echo $result;
?>

Let's break it down.

We included the recaptchalib.php library and the private key.
We sanitize the form data with filter_var
We check if any of the form data is empty with in_array. If any of them is indeed empty, we set the value of $result variable to be field_error
If none of the fields are empty, we check the answer for the reCAPTCHA words with recaptcha_check_answer. This function is defined inside the recaptchalib.php library.
The return value of recaptcha_check_answer is a PHP object. The object has a $is_valid variable value which is true if the words are typed correctly. So, we check whether the response is valid or not. If it's not valid, we set $result to captcha_error, and if it's valid $result is success. (After this point, you can mail the message to your mail address or save it to a database, as per your requirement.)
And finally we output $result

So, ajax.php outputs any of the three values — (1) field_error (when one or more fields is/are empty), (2) captcha_error (when typed words don't match with the captcha) and (3) success (voila).

jQuery Functions

We now create functions.js file. And inside it we put the following lines of code:

$(function(){
 $("#contact").submit(function(){
  $(".message").removeClass("success").removeClass("error").addClass("loader").html("Sending message").fadeIn("slow");
  $.ajax({
   type: "POST",
   url: "ajax.php",
   data: $(this).serialize(),
   dataType: 'text',
   success: function(msg){
    switch(msg) {
     case "field_error": // one or more fields is/are empty
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please fill in all the required fields.");
      break;
     case "captcha_error": // captcha wasn't typed correctly
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please type the words correctly and try again!");
      break;
     case "success": // all good
      $(".message").removeClass("loader").addClass("success");
      $(".message").html("Your message has been sent. You'll soon hear from us!");
      break;
     default: // Hmm. The default case. You never know.
      alert("Something is wrong. Please try again.");
    }
   }
  });
  Recaptcha.reload();
  return false;
 });
});

When the form is submitted, the above javascript removes success and error classes from the message section and adds the loader class to show that the message is being sent. While this is being shown to the user, an AJAX call is made that sends the form data to our ajax.php file. The response from ajax.php is then filtered with a switch. In each cases, the loader class is removed from the message section and appropriate class is added alongwith message texts. And whatever the case is, we always reload the captcha with Recaptcha.reload(). This function is provided in the javascript served via recaptcha_get_html PHP function.

If you're working with reCAPTCHA (whether on this contact form or some commenting system), you can use Recaptcha.reload() to reload the captcha without reloading the form. Helpful for form validation.

(Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.)
And that's it! This is just the basics of how things work. So go ahead customize and let us know in the comments. :-)

Highlight Rows of Table Using jQuery

2011-05-05T12:34:00.000+05:30

It’s been couple of months since I made a jQuery plug-in that lets you highlight rows of a tale. This feature is similar to GMail’s “Select Mails” option. The plugin has two components — you can trigger the plugin to select each row of a table, or you can fire the plugin on a single check-box to select all the rows of the table. You can try the demo here. It’s on sale on CodeCanyon for $3. All documentation and demo files are available for download.

Demo

Install Multiple Applications in One Go with Ninite

2011-05-03T11:21:00.000+05:30

The worst part about installing a new operating system on a hard-drive is installing the required applications once the OS is installed and functional. Not only you have to download each of the application executables, you would have to click through the installation procedure. If you’re configuring a shared computer, the task is even bigger, since more applications need to be installed to cater to every-one's requirement.

However, you can take a shortcut — by using Ninite. It’s a cross-platform application that installs several popular applications in one go. You don’t have to click through the installation wizard and un-check useless components of an application — Ninite does it for you.

You can visit the Ninite website and choose which applications you want to install in your system. Once the choice is made, hit the “Get Installer” button and Ninite will send you a tiny installer (~250KiB). If you run the installer, all the applications you previously chose, will be installed one by one. All you can do is sit back and enjoy (or walk away).

The available applications are some of the best free and open source applications, including Firefox, Chrome, Audacity, VLC, OpenOffice among many others.

Ninite always installs the latest version of the application, no matter when you downloaded the original Ninite-installer. Among one of its many features, Ninite never installs Ad-ware on your machine.

Even if the applications are already installed in your machine, you can simply run the Ninite-installer to update all the applications. So, you can use it as a mass-updater, too.

It detects the PC’s language and fetches the installation files in the same language. So you don’t have to worry about choosing the right language for the applications.

There is also a premium version of Ninite that lets you choose applications right inside the Ninite-installer. It also gives access to some nifty command-line features, otherwise unavailable on the free version.

Manage Your Distractions and Get Things Done in your IM

2011-04-03T21:31:00.001+05:30

So, you have a lot to do everyday. You start your day by making a list of things you have to do on that day. All through the day, your mind comes across many ideas (or tasks) which need to be done. But you manage to forget them because of distractions and for other reasons. What if you can keep track of your ideas and get things done? While Evernote is a great way to take notes and to-do’s lists, here is a simpler way.

GTD Stack is an instant message bot that keeps track of your ideas and to-do’s. All you have to do is to add gtdstack@appspot.com to your GTalk Friendlist and you’re done. It’s surprisingly simple and minimal. Just ask the bot “How to add a task?” and you get help right there. Here are some of the most used commands:

p <project name> adds a new project (if project not created ) / switches to project (if project is already created)
a <task> adds a task to the current project.
l lists all the tasks from the current project
L lists all the tasks across all projects.
g <task#> switches to as the current task
d marks the current task as done (and deletes the task)

Note that the commands are case-sensitive.

The bot is created by the brilliantly talented Harshad Sharma. It’s created on Google’s AppEngine platform. The source-code is available on BitBucket. In an email, he pointed out the following, regarding case-sensitivity of the commands:

Case sensitivity is used for a very practical purpose, though I understand it may be a little painful for newbies, I'll urge them to adapt to it... This app has a very low learning curve for basic use, and it gradually gets steep as you want more and more form the app — I think its fair. A flat learning curve is achievable, but the interface becomes less usable once you've reached a power user status - the case with most GTD apps.

He’s also working on email-to-add tasks. For the moment if you enter the command email, the bot sends an email to your chat ID with all the tasks.
You can follow @gtdstack on Twitter for updates.

Create Up-Down Voting in Your Web-application with Pulse Lite

2011-02-17T07:02:00.015+05:30

It’s been more than two years since I posted a simple tutorial on Thumbs Up Thumbs Down Voting with PHP, MySQL and jQuery. That post receives the second most page-views on this blog. People created voting scripts on it. More and more talks happened on its security. Some even mailed me. And admittedly, it was least secure. Refresh the page and vote again! But then again, it was just to show how things work and not meant for production at all.

Over the past few weekends, I was working on a PHP Script that’s easy to integrate and somewhat more secure. Pulse Lite is a free and open-source thumbs-up thumbs-down ajax voting script written in PHP, using MySQL database. The requirements are minimal — PHP 5.2 or above, and MySQL. You can integrate it with your existing web-application in a matter of minutes.

Demo Download

Features

Easy to integrate!
Free and open-source!
Requirements: PHP 5.2+ and MySQL
Easy to customise!
Let’s you choose the format of the vote results!
Does not mess with your data! Only a single table contains the votes and other data.
Ready for your next project!
New in v2: Now, with two new styles — YouTube-styled and Reddit-styled buttons!
Github repository is ready to be forked!

UPDATE: A premium version of PulseLite — PulsePro — is now available!Here's a comparison of what you get!

Security

The script uses a two-fold security measurement — it logs the IP of the user and sets a cookie. So whenever a user tries to vote on an item, the script checks the IP and the cookie. If they exist in the database (IP) and on users machine (cookie), the script stops the user from voting.
This is not bulletproof, though. The user can use a different IP address and clear the cookie in order to vote again. And apparently, there is no bulletproof security measurement for such a situation. The best possible case is when a user is logged in and votes on an item. We can then lock user’s ID and stop voting next time s/he tries. A premium version is under work which will have more features. Stay in touch!

Installation

Download the zip file (link is at the top). Unzip and run the SQL file included in it.
Edit pulse.config.php file inside the main Pulse directory. Fill in your database credentials. Also, fill in PULSE_DIR with the absolute path of the Pulse directory (i.e. the path of the Pulse directory inside your server)
Edit /assets/js/pulse.core.js file. Edit the value of u (i.e. the line that starts with var u). Set the value of u to the same value as PULSE_DIR
Include Pulse.vote.class.php to the file(s) where you want to show pulse. Create an instance of Pulse.
```
include("Pulse/Pulse.vote.class.php");
$pulse = new Pulse();
```
Inside the head tag, add these lines to include necessary JS and CSS files.
```
<?php echo Pulse::css(); ?>
<?php echo Pulse::javascript(); ?>
```
Inside the loop of the items (which are to be voted), add this line.
```
<?php echo $pulse->voteHTML($item_id); ?>
```
Here $item_id is the id of the item which is to be voted. Add the above line wherever you want to show the vote buttons
You can specify the format in which the results are to be shown. Just after you create the $pulse instance, add this line.
```
$pulse->setFormat("{up} like it, {down} don't");
```
Here {up} will be replaced by the number of upvotes and {down} with that of downvotes. You can also use {balance} for the difference between upvotes and downvotes.

Support

While this is an open-source project, ~~I cannot guarantee providing support for the installation~~ you can send me a mail in case you need any installation and customization, for a quote. All necessary installation guide and database structure are included with the source. An extensive sample installation can be found here for a better understanding.

Would you find any issues, feel free to discuss in the comment section. I hope you would enjoy using it as much as I did building it.

Create Your Own Cartoon Avatars for Free

2011-01-30T21:17:00.002+05:30

You must have come across many online avatars that resemble the person, but with a twist — it’s a cartoon and not the original photo of the person. It looks cool and — even more — it lets you stay anonymous while showing the world the same features that you have in reality. Here’s how you can create your own cartoon avatars for free.

Enter FaceYourManga.com. It’s a simple web-application that lets you create your cartoon avatars for free. You can choose from a variety of features — face, nose, mouth, hair, beard, glasses, even tattoos and piercing!

Once you’re done creating the avatar, you have to enter your email in order to get the download link. You can even buy and print the image in high-resolution digital format for €1.50.

Tip: If you don’t want to share your email with web-applications that claims to share download links via email, you can use 10 Minute Mail. Once you enter this site, it gives you a unique email ID valid for only 10 minutes. It is accessible only by you. Mails are automatically loaded. So you don’t need to refresh the page. If you don’t receive the mail within 10 minutes, you can extend the time for another 10 minutes.

Enable or Disable Form Elements with jQuery Plugin

2011-01-24T15:20:00.004+05:30

Over the last weekend I developed a nifty jQuery form plug-in, which lets you interact with various form elements based on user inputs. The item is up for sale at CodeCanyon for $3. You can check out a demo here.

Consider the following situation. You have a form where user updates his/her profile. If the user has a website, he/she can enter the URL field of the form. But he/she does not have a website (or does not want to share), the URL field is disabled. So, you want to enable that field based on user input.

While you can achieve the same by writing some amount of JavaScript for each such field, this plug-in makes it a breeze. It takes only two parameters and does the same for you in just one line of code. :-)

Demo

Capslock Hack: Use Capslock to Search the Web and More

2011-01-13T09:05:00.004+05:30

On a standard US keyboard layout, Capslock is probably the least used key. Most people use the shift key to type in uppercase letters. Google’s own netbook, the Cr-48 has replaced the capslock key with a dedicated “Search” key, enabling users to search the web just by hitting the button. I made some quick coding on Autohotkey to get the same functionality on Firefox and Google Chrome.

It does three things:

If no web-browser instance is active, it starts the Windows Explorer search.
If Google Chrome is active, it opens a new tab and lets you search the web.
If Firefox is active, it puts the cursor to the search box on top right.

You can use any of the following two methods to use the functionality on your Windows PC
1. Install AutoHotkey and on your favourite text-editor paste the following lines.

; Hit Capslock to search
Capslock::
SetTitleMatchMode 2
IfWinNotActive, Google Chrome or Firefox
Send, {F3}
IfWinActive, Google Chrome
Send, ^t
Send, ^k
IfWinActive, Firefox
Send, ^k
Return

Then, save it with .ahk extension. Just double click the file (after you have installed AutoHotkey) and your capslock is remapped to the new search button.
2. If the lines of code look daunting and you don’t want to install AutoHotkey, at all, I have good news for you. Just download the zip file at the end of this post and fire up the “capslock_as_search.exe” file. And there you go.

Bonus

Although it’s a personal choice, I find it great to have the backspace key around my left hand. “Try it, use it for a week, you'll never turn back” (@hiway) Just in case if anyone finds it useful here is the code:

; Hit Capslock to backspace
Capslock::Backspace

As earlier, if you don’t want to use and install AutoHotkey, you can just download the zip file at the end of the post and fire up “capslock_as_backspace.exe”
If you’re on Linux system, this post may help you.

Download

How to Download Songs from Last FM

2011-01-07T05:11:00.001+05:30

LastFM is the Facebook of music. You can discover and listen to new music, find “real” people who listen to the same kind of music as you do. You can even “scrobble” songs (much like a Tweet, except that you update with the song you’re listening to).

What if you can download the MP3s that you’re playing there? Although, LastFM does offer free songs from time to time, you can’t download songs from radios, play-lists and recommended play-list. Here are three of the best applications that let you download songs right from LastFM’s server.

TheLastRipper

TheLastRipper records songs from LastFM’s radios and brings them to your hard-drive. It also adds tags and downloads album arts for each song. The MP3 files are organised in the following fashion: Artist > Album > “SongNumber - track name” (you can customize this pattern too). This means that songs are organized in a deep folder structure. You can even tune into a LastFM radio simply by entering the URL.

LastFM Downloader

This tiny little application doesn’t need any installation. Just fire it up and start downloading. Last FM Downloader only supports tuning in via URL. You can restrict the number of songs you want to download. Downloaded songs are organised in deep folder structure. Since you can only download after you tune in through URL, you might have to play around with the structure of LastFM URLs. Not recommended for average computer users.

LastSharp

LastSharp is probably the best downloader. It downloads a play-list of 30 tracks. You can select which of these songs you want to download, unlike LastRipper and LFDownloader which continue to download. It lets you choose which of the artists’ songs you want to download, leaving aside the others. The songs are organised in deep folder layout which can be customised. It also includes a built-in audio player to play downloaded songs. One of the interesting features is that it doesn’t download songs that are already downloaded, even if the play-list repeats the songs or a different play-list has the same songs.

Here’s comparison of the features.

Disclaimer: This blog and its author(s) do not condone software piracy. The above post is for information only and should not be taken as a promotion of copyright infringement.

AbhiTech is Now Technabled!

2011-01-06T06:18:00.002+05:30

It’s been 5 years since this blog started. First it was by the name “Cyberbuff’s Blog” and later by “AbhiTech”. It was crying for a makeover. So, I thought about buying new domain and giving it a professional “look.” So here we are.

Although the look remains the same, a lot has changed with this update.

Apart from getting a new web-address, Technabled now has a logo that’s a mash-up of the power button and the Latin T.
Et Cetera, a Tumblog, is now a part of Technabled. Et Cetera is updated almost everyday with interesting links from around the web. Do subscribe to the feed to keep connected!
Twitter profile for Technabled offers tips, tricks on daily basis. Do follow!
Facebook’s fan-page now has a “vanity” url -- http://facebook.com/technabled You can tag our page by adding @technabled in your updates. “Like” our fan-page to get updates on Facebook!
If you want to contact me, please do so at abhisek@technabled.com I would love to hear from you.

The content remains the same -- technology. Enjoy your stay here! If you any suggestion, criticism (or any other feedback) to share, please do so in the comments section!

India's $35 Tablet PC

2010-07-24T07:24:00.003+05:30

The minimum amount of money an iPad can cost you is $499. But if you don't bother about the high-end features iPad provides and you just want to browse the net, then forking out $499 is not a good idea. Well, you can get a touch tablet 'PC' for less than $50. India's HRD ministry has unveiled a prototype.
HRD Minister Mr. Kapil Sibal has unveiled a prototype of a touch tablet that costs only $35 and can be used to browse webpages, word processing, and even video conferencing. The technicalities of the device are unknown but it doesn't use hard-disk. Instead it uses memory cards — much like mobile phones. It runs on a battery but it is solar power option too.

The price will be even lower for students for whom the Government is ready to subsidise even more. The cost of this tablet for a student will be around $20.
The reponse from the private sector has been lukewarm since the profitability of the device is being questioned.
[Via BBC South-Asia]

5 Common Misconceptions about Evernote

2010-07-09T06:31:00.001+05:30

Evernote is probably the best and the most popular note-taking application on the web. Evernote recently reached 3 million users which is a great news for Evernote fanboys (and fangirls). But even after so much success, people still have misconceptions about the application. From security woes to limited functionalities, some people write it off for various reasons. This post is about some of those commonly held myths. Feel free to add your comments.

Misconception 1: Evernote is a note taking application. Very little possibilities. It's not for everyone.

Possibilities with Evernote are enormous. Every once in a while Evernote publishes Tips on how to use Evernote more effectively. From using it for planning your house to store your gym's schedule, you can do a lot with Evernote. If you're still not conviced, consider reading the following two articles:

Misconception 2: You cannot share your notes with any one. Your notes are caged!

Evernote lets you share entire 'notebooks'. Here are detailed instructions how to do so.

Misconception 3: Your notes and documents are not secure.
EverNote makes a back-up of your notes in at least 5 disks. So data-loss is virtually impossible. Still EverNote has a well chalked out privacy policy which ensures your notes are safe.

Misconception 4: For free users, EverNote provides 40 MB sync bandwidth every month. This is too little.

Sync bandwidth is the amount of data you send to EverNote and not the actual amount of data your notes takes in their drives. With 40 MB sync bandwidth, you can make 20,000 typed notes, 270 web clips, 400 Camera Phone images. That's much more than you need. Still in case, you ran out of bandwidth, you can go premium for $5 a month ot $45 a year. Premium accounts get 500 MB sync bandwidth a month, along with other features.

Misconception 5: There's no Symbian client for Evernote.

There is one EverNote client for Symbian-based smart-phones, although not officially supported by Evernote. It works on all phones based on S60 5th Edition.

6 Striking Features on New Digg

2010-07-01T15:32:00.004+05:30

Digg has launched an invite-only preview of its newest user-interface designs that it will be launching for the public later this year. Apart from little changes here and there, these are some of the striking new features that would surely make it more social and usable.
1. Twitter style links: Profiles of each user will be accessbile through Twitter style URLs. i.e. digg.com/username

2. You can follow users. Just like Twitter. Once you sign in, you would be presented with a list of popular profiles on Digg whom you might like to follow. Updates from those you follow is available on the My News page. That's the same page as Twitter timeline.

3. Connect Social Networks: Joining the likes of most social networks, Digg will offer you to connect to Facebook, Twitter and Google to add new people whom you already know.

Once connected, you can see a list of people from the same network. You can follow them right from that page. It's that simple!

4. Simplified link submission: In just a couple of clicks, you can submit links to Digg. You can submit links right from the My News page. Just after you enter the URL, the title and the embedded images are loaded on the fly. All you have to do is to enter a description and hit the button. No more horrible captchas. It's simpler than ever before.

You can even comment on the newly submitted URL right from there!

5. Auto-submit content: Now, you can auto-submit content to Digg from any feed item. You don't have to visit Digg to submit a link everytime you make a new post. Just add the feed to Digg and everytime you post, it will auto-publish the content.

6. Twitter-style Load more widget: You can stay on the same page and keep borwsing through Digg's interesting links. All you have to do is to click on the Load More link once you're done reading everything on that page. With this, Digg has done away with pagination which is irritating for some users.

Free Calls from Skype to Qualifying Countries for the World Cup

2010-06-25T06:33:00.002+05:30

Skype, the most popular VoIP service provider, is offering a month of free calls from Skype to any number around the world, to celebrate 2010 Fifa World Cup. This offer is valid for 30 countries which are qualified for the World Cup 2010. You can check the announcement here. Out of these 30 countries, Skype offers unlimited calls to landline numbers in some of the countries (including the US, Australia, France, Germany among many other countries). But Skype charges a nominal fee of 1 Euro for all this plans. Payment can be made through any of the three options Skype offers.

11 PHP Voting Scripts and Tutorials

2010-06-13T06:38:00.000+05:30

Ever since I wrote the tutorial on Reddit-style Voting With PHP, MySQL and jQuery, I get around 300 visitors everyday with keywords like "php voting", "jquery votes", "jquery vote up down", "php vote tutorial", "votes php mysql" and many other keywords. So I thought about writing a round-up of voting scripts and tutorials using PHP as the server-side language. Here are the tutorials and scripts that might be of your use. If you think I missed anything, do let me know in the comment section. You can also have a look at the round-up section for more such round-ups. :-)

Scripts

1. ColorRating: A well-documented, easy to use voting script. Higly configurable and easy to integrate with your database. It uses jQuery for a nice animated effect.

2. PHP Voting by Richard Silvers: A "fairly" simple PHP voting script. It allows users to vote and view the total results of the vote.

3.Star Rating Widget: The Star Rating widget is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control based on a set of radio buttons or select option.

Commercial Solutions

1. Ajax Feature Request and Voting ($14): It's simple and a lot like Dropbox's votebox page.

2. ThumbsUp ($17): This is probably the best commercial script that is available. It comes with a slew of options — in various shapes and sizes. AJAXed!

Tutorials

1. Voting system with jQuery, Ajax and PHP: A very detailed tutorial on Dzone like voting system with jQuery, Ajax and PHP. This script helps you to display user votes on blog post.

2. A Simple PHP Polling/Voting System: This article will illustrate how to create a very simple, clean polling or voting system using PHP 5.0 and the DOMDocument object model. This allows the polling system to read and write polling results to XML, instead of say, a MySQL database like many conventional polling systems.

3. Creating a simple file based polling script: This tutorial will show you how to create a simple, file based polling system where you can easily setup new polls. No database is required for this script and you only have to maintain one config file.
4. Creating a Dynamic Poll with jQuery and PHP: This tutorial shows how to create a simple polling system that doesn't need a page-refresh to show the results.

5. How to Build a Poll System with PHP and MySQL [Demo]: This is pretty simple tutorial that explains how to polling with PHP and MySQL works. It offers the source-code, too.

6. Sort & Vote – A jQuery Poll: This is a very detailed tutorial on an innovative concept of polling with jQuery. The end result lets users drag items in order of preference and then submit it for polling!

Bonus

Very Simple Rating System - AJAX via jQuery, JSON: I guess, it's in Russian. Digg-like voting using jQuery, JSON.

Record Skype Calls for Free with iFreeRecorder

2010-06-05T20:06:00.001+05:30

Skype is an award-winning IM platform that is hugely popular for making calls to other Skype users and phones across the world. A lot of the companies regularly buy Skype Credits to make calls to their clients. And it's much cheaper to make calls from Skype than from usual phones since it uses Voice Over Internet Protocol (VoIP). If you use it for the purpose of making calls, you may want to record calls that you made just to keep track them. iFreeRecorder is an application that does the job and that, too, with many options to choose from. iFreeRecorder uses Skype API to record calls.
Once you intall iFreeRecorder (Skype must be installed first, of course), you'd have to give access to use Skype's API.

Once you allow access to Skype's API, you're ready to go.

iFreeRecorder comes with a bunch of options — from MP3 quality selection to auto-record calls.

It also offers a history option that keeps track of all your recorded calls. You can also record conference calls!
iFreeRecorder is an innovative and very useful tool. It comes as a freeware but if you find it useful, do consider donating.

Code Faster HTML with Zen Coding

2010-05-06T17:50:00.002+05:30

Do you code in HTML? Does the sight of lines of HTML makes you sick? Do you want to speed up your workflow? If "Yes!" is the answer to any of these questions, then you must try Zen Coding — a powerful tool to write lines of HTML (and CSS) in just a few letters. Zen Coding uses simple abbreviations (which you can hardly forget) to expand them into valid HTML syntax. The best part of it is its robust integration with almost every popular IDE.

How It Works

Once you install Zen Coding plug-in to your favorite text-editor, you are ready to go. For example, type the following in your text-editor:

div#wrapper>div#right+div#left

Now, hit CTRL+E and see the magic:

<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
</div>

The short-codes are so self-explanatory that you hardly need any time to catch how they work. Zen Coding also supports expanding CSS short-codes. You can find a cheatsheet of all the available short codes in the download section. Geeks, you can even write your own custom short-codes and expansions!

Supported IDEs

Zen Coding fully supports a bunch of popular text-editors including Notepad++, Textmate, Coda, Komodo, Aptana/Eclipse, GEdit, Dreamweaver, Emacs, Vim. You can even include Zen Coding features in <textarea> fields in your browser.

How to Add Facebook's Like Button to Your Site

2010-04-22T07:17:00.004+05:30

Facebook recently launched the "Like" button feature, in a bid to gain more access to sites. This new feature enables users to share content with only one single click. The links to the pages will appear on users' profiles and on a friends' timelines. Facebook also changed the word "Fan" (for pages) to "Like". Facebook Devs say, "the average user clicks "Like" on nine pieces of content each month." So "vox populi, vox dei"! Here are some ways you can integrate Facebook's like button to your blog.

For Blogger

Put the following code where you want to show the button.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=450&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:70px'/>

For 'Classic' Blogger

Put the following code where you want to show the button. (Update: This code is updated and works perfectly with Blogger. Thanks, Kristina!)

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=button_count&show_faces=true&width=75&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:75px; height:20px"></iframe>

For Wordpress

Put the following code where you want to show the button.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=true&width=75&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:75px; height:20px"></iframe>

This is a really awesome feature Facebook has come up with. With a little tweaking, you can easily come up with what Facebook Blog shows in the sidebar (see the screenshot below).

You can read more about the API here.

Google's Experiment with Twitter: FollowFinder

2010-04-15T05:33:00.001+05:30

Google is testing a new service called FollowFinder to find similar users on Twitter. The product is currently in beta — you can try it in Google Labs. After the launch of real-time search results, this is probably Google's first experiment with Twitter. FollowFinder runs on Google's AppEngine platform. In their own words,

"Follow Finder analyzes public social graph information (following and follower lists) on Twitter to find people you might want to follow."

FollowFinder gives you two lists of people — the first one is based on people you follow and the second one is based on the people who have same followers as you have. You don't have to log-in to Google or Twitter to use FollowFinder — just enter any Twitter username and find similar followers. You can also follow people right from FollowFinder — there's a button below every Twitter user. It feels more like Twitter than inside Google. Even Twitter’ Hovercards works inside FollowFinder.
Google's latest offerings have focused more on Twitter than Google Buzz. It is not clear whether these new product launches are an admission that Google Buzz is a failure.

EverNote Brings iPad Client and New Features in Email Notes

2010-04-09T14:35:00.002+05:30

EverNote, the most popular note-taking application, released its iPad client, as promised earlier. They also unveiled a better improved email-note-taking feature. With the release of iPad client, Evernote has almost all devices covered (except a J2ME and a Symbian client). The iPad client, like all other Evernote clients, is simple in its UI and easy to navigate. The dev-team also posted a video that explains how it works. Yet another reason why you may want to buy an iPad!

The new features in Email note taking is long-awaited features. Now, you can specify where (which notebook) to save your mailed notes and under which tags. To specify a notebook while adding a note via mails, just put @[notebook-name] to the subject line. You can also add tags. Find more about it at the Evernote blog.

Howto Create Facebook's Status Message Timeline with jQuery oEmbed and AJAX

2010-04-07T06:56:00.001+05:30

We all love Facebook. You can catch up with friends, family or colleagues, meet new people, share photos, links and whatnot. One of the most striking feature of Facebook's timeline is inline content embedment. It enables you to view content from third-party websites without having to visit the site. Facebook might be using oEmbed with a lot of modification of their own. Over the last weekend, I tried to create a mock-up of Facebook's inline content embedment with jQuery oEmbed and some AJAX. This tutorial is about how you can create it on your own. I hope you'd enjoy it. :-)
Download Source Try Demo
You might also like:

What is jQuery oEmbed?

oEmbed is an open format which allows sites to embed content from third party sites. You can embed photos, videos, documents, flash players or any other rich multimedia contents (from selected sites). oEmbed is supported by an array of popular sites — from Flickr to Youtube to Vimeo, among others.jQuery oEmbed is a plugin that uses the oEmbed API to embed content. It's super lightweight (minified version is 4KiB) and, like most jQuery plugins, simple in its use. Here's the syntax:

<script type='text/javascript'>
// attach jQuery and jQuery.oembed plugin before this point
$(function(){
 $("a.embed").oembed();
});
</script>
<!-- HTML -->
<a href='http://www.youtube.com/watch?v=8JRICTFnViM'>PHP Tutorial on YouTube</a>

jQuery.oEmbed creates div with class-name "oembed-container" and embeds the content in it.

Application Flow

Our application would be simple — it will post the messages users post and converts links to embedded content. Below is the flow chart of how it's going to work.

Create the layout

Our layout is simple, as the application itself.

Put these lines of code in index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook Like Status Update with jQuery oEmbed</title>
</head>
<body>
<div id='wrapper'>
 <div id='updateBox'>
  Enter Your Message here...
   <textarea id='statusMsg'></textarea>
   <button id='shareBtn'>Share</button>
   (No HTML, only links and text)
   <div class='clear'></div>
 </div>
 <div id='msgs'>

 </div>
</div>
</body>
</html>

Here, we create a wrapper and put all the elements in it. Each message will be put in a div with class name "msg".

CSS

For the CSS, I chose the colors and the layout in a way so that it resembles Facebook. You can choose any color you wish.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 14px;
line-height:1.3em;
text-align:center;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

img {
 border:0;
}

#wrapper {
width:480px;
margin:0 auto;
text-align:left;
}

#updateBox {
 background-color:#F2F2F2;
 border:1px solid #B5B5B5;
 padding:4px;
}

#statusMsg {
 width:100%;
 height:70px;
 border-color:#7C7C7C #C3C3C3 #DDDDDD;
 border-style:solid;
 border-width:1px;
}

#shareBtn {
 background:#5872A7;
 float:right;
 color:#ffffff;
 font-weight:bold;
 border:0;
 padding:4px;
 margin-top:2px;
}

#msgs {
}

.msg {
 margin-top:8px;
 border-bottom:1px solid #B5B5B5;
 padding-bottom:4px;
 color:#808080;
 font-size:13px;
}

.msg a {
 color:#3B5998;
 text-decoration:none;
}

.msg a:hover {
 text-decoration:underline;
}

.oembed-container {
 border-left:2px solid #eaeaea;
 margin-left:15px;
 padding:4px 4px 4px 10px;
}

There's nothing much about the CSS that needs explanation. Only the "oembed-container" class. jQuery.oEmbed, by default, creates a div with class-name "oembed-container". We put some styles to distinguish the embedded content.

The Database and Table

We need a table to store the status messages. I created a very simple table with only two fields — id and content. id is the numeric id of the status message and content is the status message text. To create a table like this, use the following SQL code.

CREATE TABLE `status_msgs` (
  `id` int(11) NOT NULL auto_increment,
  `content` text,
  PRIMARY KEY  (`id`)
);

Please note that the table super-simple. Most applications have a user_id field in such tables to identify which user posted the status. But for this simple tutorial, I avoided all this. If you have queries, use the comment form below. :-)

Connect to the Database

Create a new file and save it as config.php. Put the following code in it.

<?php
 $host = "HOST"; //your hostname. it's "localhost" in most cases
 $username = "USERNAME"; //your username
 $password = "PASSWORD"; // your password
 $db = "DB"; // name of the databae
 
 mysql_connect($host, $username, $password) or die("Cannot connect to database.");
 mysql_select_db($db) or die("Cannot select the database.");
?>

Do change the credentials with yours.

Create the Timeline

When the page is loaded we want the user to see what's posted on the timeline. So, we connect to the database and fetch all the statuses and create a div for each status. The following lines of code will do it. Add them inside <div class='msgs'></div>

<?php 
   include("config.php");
   $q = "SELECT * FROM status_msgs ORDER BY id DESC";
   $r = mysql_query($q);
   if(mysql_num_rows($r) > 0) {
    //updates are found
    while($row = mysql_fetch_assoc($r)){
     echo "<div class='msg'>\n";
     echo $row['content']."\n";
     echo "</div>\n";
    }
   } else {
    //nothing in the table.
    echo "No update found in the database!";
   }
?>

Also, we add this few lines of code inside <head> tag of index.php to enable oEmbed on the links in the timeline.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script type='text/javascript' src='jquery.oembed.min.js'></script>
<script type='text/javascript'>
$(function(){
 $(".msg a").oembed(null, {
 embedMethod: "append",
 maxWidth: 480
 });
});
</script>

Don't forget to place jquery.oembed.min.js in the same directory as index.php

Post Status Messages via AJAX

Now, it's time we add some AJAX functionality to our little application. When the user clicks on share button, we do two things with the help of before submitting it via AJAX. The first thing is to check and remove all HTML tags from the status messages. Secondly, we have to replace URLs with HTML anchor tags. Create new file, functions.js, and put the following two functions in it.

function stripHTML(source){
 var strippedText = source.replace(/<\/?[^>]+(>|$)/g, "");
 return strippedText;
}

function replaceURLWithHTMLLinks(source) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
   replaced = source.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 
   return replaced;
}

The first function removes all HTML tags and the second function (source: StackOverflow) replaces URLs with HTML anchor tags. (If you're wondering what the functions are, I used Regular Expressions.) Attach functions.js to index.php by adding this line inside <head> tag.

<script type='text/javascript' src='functions.js'></script>

Next, we add these few lines of code inside the <head> tag of index.php

<script type='text/javascript'>
$(function(){
 $("#shareBtn").click(function(){
  status_text = $("#statusMsg").val();
  if(status_text.length == 0) { //nothing entered
   return;
  } else {
   $("#statusMsg").attr("disabled", "disabled"); //disable the textarea while ajax is in process
   status_text = stripHTML(status_text); // clean all html tags
   status_text = replaceURLWithHTMLLinks(status_text); // replace links with HTML anchor tags.
   $.ajax({ //make ajax request
    url: "ajaxUpdate.php",
    type: "POST",
    data: "status_msg="+status_text,
    success: function(msg) {
     $("#statusMsg").val(""); //clear the textarea
     $("#statusMsg").attr("disabled", "");
     if(msg == "true") { //msg is posted
      $("#msgs").prepend("<div class='msg'>"+status_text+"</div>"); //add the posted msg to timeline
      $(".msg:first a").oembed(null, {maxWidth: 480, embedMethod: "append"}); //oEmbed links of the posted msg 
     } else { //failed
      alert("Cannot be posted at the moment! Please try again later.");
     }
    }
   });
   return false;
  }
 });
});
</script>

Above code works when the user clicks on the Share button. When no text is entered, nothing happens. If text is entered, we use those JavaScript functions to remove HTML and turn URLs to HTML anchor tags. After sanitizing the text, we make AJAX request to ajaxUpdate.php (which we will create). If the response is "true", the posted message is added to the timeline, and the links in the message are converted to embedded content. If the response is not "true", we alert the user that the message cannot be posted at the moment.We put the following code in ajaxUpdate.php

<?php 
include("config.php");
if(!$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
 {
 die("No direct access to files is allowed");
 }
if(!empty($_POST['status_msg'])){
 $q = "INSERT INTO status_msgs (content) VALUES ('{$_POST['status_msg']}')";
 $r = mysql_query($q);
 if(mysql_affected_rows() == 1) {
  echo "true";
 } else {
  echo "false";
 }
}
?>

This is fairly simple — first, we make sure that the page is accessed only via AJAX. Then we check to see that the status message text is non-empty. If it is not empty, we insert the message to the table and "true" is printed. "false" otherwise.That is it!

Conclusion

oEmbed also has a PHP library. If you're looking for more control over your application, you may find it helpful. I hope you enjoyed the tutorial. If you have queries, feel free to use the comment form below.

YouTube's New Video Page is Live

2010-04-02T23:08:00.002+05:30

YouTube has made a huge overhaul of its videos page. With an array of interface changes and new features, this new version of YouTube is available to all users across the globe. If you have not checked out YouTube's new videos page, you'd greeted with a tour of the new interface.

After realising that the 5-star ratings is of no use, YouTube has introduced "thumb-up"/"thumb-down" voting system. Now, you can either like the video or hate it.

Also, instead of showing various sharing options, YouTube now offers only one button to share videos across all social networks — click on the button and copy the link of the video or share on any network.

Many other minor changes in the interface has been made. You can read about them on official YouTube blog.

10 Ready-to-use jQuery Plugins for Drop-down Menus

2010-03-27T06:24:00.004+05:30

Drop-down menus are a necessary 'evil' for any complex web-development project. Whether you're working on the admin-area of a web-application, or building a simple UI, drop-down menus are almost indispensable. But you may not feel all that excited creating a drop-down menus of your own when you have these plugins to make the task easier. These plugins don't need you to write complex CSS styles to create a super-simple drop-down menu.

2010-03-21T09:07:00.000+05:30

NullScriptz, the premium destination for pirated scripts, themes and web-applications is closing its free sign-up program starting 22nd March 2010. It would be invite-only for everyone. However, you always have the option to sign up for VIP accounts for a cost of $30 for 6 months.

In an email to all its members, the site admins wrote:

Starting Monday 22nd March 2010 we will become invite only.
Each active member will get 1 invite per week, so use it wisely, you must be sure of any member you invite, their actions will reflect on you also as your invite means you are vouching for that person, any misdemeanours not only go against them but against you only.
As from Monday we will also be cleaning up the board of inactive members.

An invite every week is a very innovative idea and it doesn't completely stop new members from getting in. But if you want your account now, don't wait before its too late.

Disclaimer: This blog and its author(s) do not condone software piracy. The above post is for information only and should not be taken as a promotion of copyright infringement.

Find All Google Doodles Till Date

2010-03-08T08:37:00.001+05:30

Everyone loves those doodles Google creates from time to time. Most of these logos are created to celebrate various occasions — from Valentine's Day to Holi. Most of these logos are created by Google's webmaster Dennis Hwang. Starting from 1998 to January, 2010, a total of 712 logos have been created so far. But how on earth can you keep track of them? Google has the answer.

The recently launched Google Logos site features all the doodles created so far, starting from 1998. It also showcases fan logos and official logos. You can browse doodles by a simple timeline.

HOW-TO: Create a Flash-like Animated Menu with jQuery and CSS

2010-03-02T08:30:00.005+05:30

Browsing through TemplateMonster the other day, I stumbled upon a Flash template up for sales. As with most flash templates, animated navigation menus are the eye-candy. And this one was no exception. After playing some time with jQuery and CSS (in Notepad++), I made a look-alike. This tutorial is about how you can create the same — and improve it. I hope you’d enjoy the tutorial. Let’s get started.

Try Demo Download Source

You might also like:

Objective

We are going to create a vertical navigation menu. When the user hovers on each link, the following will take place:

A link with white color will fade in, hiding the link in normal state (with the same href attribute).
While the white link fades in, the background of the link will animate from right to left.

What We Need

We need the following:

A modern browser (Although it works on IE6 too!)
jQuery JavaScript Library. Download from jQuery website.
Your favorite text-editor. (Mine is Notepad++)

Create the Layout

We create an HTML file and put the following lines of code in it.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animated Flash-like Menu with jQuery and CSS</title>
</head>
<body>
<div id='wrapper'>
 <div id='sidebar'>
  <ul id='menu'>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Services</a></li>
   <li><a href='#'>Testimonials</a></li>
   <li><a href='#'>Contact Us</a></li>
  </ul>
 </div>
</div>
</body>
</html>

Here we created a basic layout. The navigation menu we are creating is placed under the sidebar. (You can put it anywhere. Just keep it in mind it's going to a vertical navigation menu.) The href attribute of each link is set to # (for the purpose of the tutorial.)

Let's Add Some Styles

So, we have our layout. Let's add style to it. Create style.css and put these lines of code in it.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}

#sidebar {
 width:250px;
 float:left;
}

ul#menu {
 list-style:none;
}

ul#menu li {
 margin:0;
 padding:0;
 overflow:hidden;
 float:right;
 position:relative;
}

#menu li a{
 color:#000000;
 float:right;
 padding:6px 8px 6px 3px;
 width:200px;
 z-index:2;
}

The first two blocks of CSS styles are bare necessities. It's somewhat a modified (and lightweight) version of Reset CSS. You may do away with them, as well. We set the width of the wrapper to 960px and sidebar to 250px. (You can set them to anything.) Next, we set the list-style of the unordered list to none. (i.e. removing those pesky circles before each list item.) We set the overflow of each list element to hidden to hide everything that overflows the width of list elements. Position of each list element is set to relative because we are going to put absolutely positioned elements inside list elements. All the links inside list elements are floated to right, width set to 200px and z-index is 2. The z-index is important here because the links will overlay a span element with a lower value of z-index. Don't forget to attach the stylesheet to index.html (under <head> tag.

<link rel='stylesheet' href='style.css'></link>

On Hover

When the page loads up, each link element will change into the following:

<li>
 <a href="#">Home</a>
 <a href="#" class="overlay">Home</a>
 <span></span>
</li>

The extra link element (with class-name "overlay") and span element will created on-the-fly by jQuery, and both will be absolutely positioned. The span element will work as the background but it will be hidden untill the user hovers the pointer on the link. Let's add styles for these two extra mark-ups. Add these lines to style.css

#menu li a.overlay {
 color:#FFFFFF;
 position:absolute;
 text-decoration:none;
}

#menu li span {
 background:#528691;
 position:absolute;
 width:211px;
 height:34px;
 top:0;
 left:211;
 z-index:1;
}

The css definitions are pretty simple and easy to understand. Only one thing may need explanation — the width of the span is set to 211px. The width of each link in the list elements is set to 200px and they have right-padding and left-padding of 8px and 3px respectively. Thus, the effective width of each link will be 200px + 8px + 3px = 211px. Since the span will behave like the background of links, it should have the same width. Also notice that each span is kept 211px far from left. This is just to hide it.

Animate on Hover

Now that we are done with mark-ups and styling elements, it's time we add some javascript to animate the background on hover. Put these lines of code in index.html (under <head> tag)

<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
$(function(){
 $("ul#menu li").each(function() {
  anchor = $(this).html();
  overlay_anchor = $(anchor).addClass("overlay");
  $(this).append(overlay_anchor);
  $(this).append("<span></span>");
  $('.overlay').css({ opacity: 0 });
 });

 $("ul#menu li a,  ul#menu li .overlay").hover(function() {
  $(this).parents("li").children("span").stop().animate({ left: 0 }, 150);
  $(this).parents("li").children("a.overlay").stop().animate({ opacity: 1 }, 100);
  }, function() {
  $(this).parents("li").children("span").stop().animate({ left: "211px" }, 150);
  $(this).parents("li").children("a.overlay").stop().animate({ opacity: 0 }, 100);
  }); 

});
</script>

The first line attaches jQuery library to index.html. Then, we clone the link in each list element and add append the cloned element after setting its classname to "overlay". We also append a span tag (which will animate and behave like background). The opacity of the overlay class is set to 0 to hide it. Next, when the user hovers on links, we animate the span from right to left (by setting its "left" to 0). We also change the opacity of the overlay class to 1. When the user hovers off the links, we change the links back to what it was before. That's it!

Conclusion

The potential of jQuery and CSS working together is great. This is just a simple way to mock up what Flash does best — animation. You can further improve on it. Like animating the current page link on document load. Or something more useful that fits your needs.

Giant Painting of Famous People with Wiki Links

2010-03-01T06:55:00.001+05:30

What's common between Bruce Lee and Einstein? Elvis Presley and Vladimir Putin? Mike Tyson and Charles Darwin? Or Mao Zedong and Pele? Well, they are under the same frame — a giant painting of famous people. Whatsmore, you can visit WikiPedia pages for those people just by clicking on them. The image, it seems, may not be hand-drawn. The techniques used to achieve this effect is image-mapping.

Tweet from Gnome with Pino

2010-02-22T14:28:00.005+05:30

Are you looking for a ‘good’ Twitter client for Gnome? Not happy with Twitux? Try Pino. It’s a new Twitter client for Gnome-based desktop environments. It’s a very lightweight app with minimal dependencies. The latest version supports Identi.ca updates and multi-accounts, among many other features. You can shorten longer URLs on the fly with goo.gl and is.gd. The latest version is an experimental version.

If you are using Ubuntu, use the following command-lines to install Pino,

sudo add-apt-repository ppa:vala-team/ppa
sudo add-apt-repository ppa:troorl/pino 
sudo apt-get update
apt-get install pino

More installation instructions can be found at the download center.

Add a Google Buzz Button with Buzz Count

2010-02-17T11:15:00.001+05:30

Last week I posted how to add Google Buzz button to your Blogger blog. This is a follow-up of that post. But the following hack can be added to any website — whether running Blogger or Wordpress. Since Google Buzz API doesn't provide any function to count the number of shares in Google Buzz, we'll be using Bit.ly's API to count Buzzes. Please make a back-up of your template (or html files) before making any changes. I will assume a couple of things,

You have a Bit.ly account. If not, register for a Bit.ly account.
After clicking on the button, each user shares the links on Google Buzz

Step 1

Get your Bit.ly API key. Add the following lines inside the <head> tag.

<script type="text/javascript" src="http://bit.ly/javascript-api.js?version=latest&login=YOUR_LOGIN_ID&apiKey=YOUR_API_KEY"></script>

Replace YOUR_LOGIN_ID and YOUR_API_KEY with your credentials.

Step 2

Add these lines of code inside the <head> tag.

<style type='text/css'>
.btn {
background:url("http://1.bp.blogspot.com/_FX3RmPElUpc/S3tw51HNEtI/AAAAAAAAAz8/b9aPyAAwBl0/s144/buzz-button.jpg") no-repeat center center;
width:50px;
height:58px;
position:relative;
text-align:center;
}

.btn a {
position:absolute;
bottom:0;
left:0;
display:block;
height:17px;
width:50px;
}

.btn span {
position:absolute;
right:0;
left:0;
top:5px;
font-size:14px;
font-weight:bold;
letter-spacing:0.1em;
padding:3px;
color:#ffffff;
}

</style>

Step 3

Add the following code where you want to show the button

<div class='btn'>
<a href='LINK_TO_SHARE_IN_GOOGLE_BUZZ' class="buzzbutton"></a>
</div>

Replace LINK_TO_SHARE_IN_GOOGLE_BUZZ with the link. If you're using Blogger, you can find the link here. If you're using Wordpress, you can find the link at TricksDaddy. Do not remove the class ("buzzbutton").

Step 4

Add these lines of code just before </body>.

<script type='text/javascript'>
/***
Buzz Count Script using Bit.ly API.
Abhisek Dutta (http://ad1987.blogspot.com/)
***/

//get all anchor tags with buzzbutton as the class
urlContainer = {};
hashContainer = {};
function getAllButtons() {
anchrs = document.getElementsByTagName("a");
btns = new Array();
for(i=0; i<anchrs.length; i++) {
if(anchrs[i].className == "buzzbutton") {
btns.push(anchrs[i]);
}
}
return btns;
}

var btns = getAllButtons();

for(i=0;i<btns.length;i++) {
long_url = btns[i].href;
urlContainer[long_url] = i;
BitlyClient.shorten(long_url, 'replace_link');
}

function replace_link(data) {
for (var r in data.results) {
doc = data.results[r];
break;
}
short_url = doc['shortUrl'];
hash = doc['hash'];
hashContainer[hash] = urlContainer[r];
btns[urlContainer[r]].href = "http://bit.ly/"+hash;
BitlyClient.stats(hash, 'getStat');
}

function getStat(data) {
var clicks = data.results.clicks;
var hash = data.results.hash;
span = document.createElement("span");
span.innerHTML = clicks;
btns[hashContainer[hash]].parentNode.insertBefore(span, btns[hashContainer[hash]]);
}
</script>

That's all you have to do! Let me know if it works for you in the comments section.
P.S. This is inspired by Mashable

Control Website Addiction and Stay Focused with ToVisitOrNot

2010-02-17T08:21:00.000+05:30

Are you addicted to Facebook? Can't think of life without your friends' timelines on Twitter? Spending too much time on Orkut? Cannot stay productive on a permanently connected world? Well, ToVisitOrNot may help you!

ToVisitOrNot creates modified URLs of sites with a minimum time period between two successive visits. You can visit the sites using the modified URLs. But if you visit it more often than the specified time period, ToVisitOrNot will show you a warning message. Very simple idea but very unusual in its use.

6 Best Online Collaborative Text Editors

2010-02-16T07:54:00.001+05:30

Whether you're a developer or a finance guy or a simple computer user, at some point of time, you must have shared documents with your colleagues. After you shared the documents, if you make any more changes, you have to send them as attachments with your email. Amid loads of works you do everyday, this might be a pretty boring repetitive work. This process would have been easier if the recipient could see your changes as you type. Online collaborative text-editors are the answer. Simple, easy and saves time. You don't have to share the document — just share the link!

Google Docs

Probably the most popular text-editor online. Google Docs is simple to use and share. You can share the documents with certain Google users or the public. It's good for showing your works but may not be the best to keep track of who-edited-what since the main purpose of Google Docs is to provide an online alternative to MS Office. As a result revision options are not that structured.

WriteBoard

WriteBoard is a product of 37Signals. As with most of their products, WriteBoard is super simple and easy to use. You can protect every writeboard you create with a password and username. Every WriteBoard has a URL that is almost unguessable. You can invite collaborators to share and edit Writeboards. Changes are highlighted in different colors, making it easy to keep track of the changes and their authors.

Mozilla Bespin

Bespin is a beta application from the Mozilla Labs. Its simplistic approach to text-editing and sharing may find a lot of takers. But it may not be the best option for an average computer user. It uses various commands to do certain jobs which otherwise would have been easily done with simple UI. It's more like Nano for the web. Bespin allows you to do complex jobs like SVN controls or search-and-replace with regular expression. Perfect for geeks and Linux users.

EtherPad

Etherpad is open-source and can be run on your server. When Google announced Wave, many of its collaborative features were already available with Etherpad. Finally Etherpad was acquired by Google!

Etherpad is "the most frictionless way to get people on the same page" (Drew Houston, Dropbox). From colour hightlighting to online chat with collaborators, Etherpad has all the features you can ask from an online text-editor. You can even export your texts as HTML files. Etherpad has a time slider to keep track of times when certain changes were made. Creating a new pad is just a click away!

CollabEdit

CollabEdit is aimed for programmers working online. It supports syntax highlighting for a number of programming languages including C, Perl, PHP, HTML, XML, Visual Basic. Like Etherpad, CollabEdit supports chat among collaborators. You can download the document as a txt file. Its simplistic approach may find many takers among the programming fraternity.

Amy Editor

AmyEditor probably has more features than any other online collaborative editors. The interface resembles Mac OS. AmyEditor supports syntax highlighting (of almost all languages), tons of keyboard shortcuts, templates of multiple languages, multi-tab editing, and tons of features. You can edit and add code snippets for frequent uses. It offers a console with logs. Perfect choice of programmers.

Tell us your choices in the comments section.

Create Beautiful 3D Image Slider with CU3ER

2010-02-14T21:55:00.001+05:30

A lot of web-developers shudder at the thought of embedding Flash on their sites. But Flash can be a good thing if it is used as less as possible and content is separated from Flash elements. If you are looking for image slider with nice 3D effects, CU3ER has got it!

CU3ER is a Flash-based solution to show off your featured content, recent posts, recent projects, or (for a professional layout) services and features a company offers. It is simple to use and well-documented. Even if you’ve never used Flash elements, the documentation will teach all you need to know.

Cu3er (pronounced as kju:bər) can be customised via XML files for settings and configuration of the slider images and transitions. Cu3er uses two directions for 3d transitions — horizontal and vertical. But it allows to create your own custom transitions.

Cu3er is free and can be used for both personal and commercial projects.

Add a Google Buzz Button to Your Blogger Blog

2010-02-12T20:37:00.003+05:30

Google's Buzz is the new service with which Google has made its efforts to make its own contribution to already-oveloaded social media scenario. Whether it can stand out in the crowd or becomes yet another failure, only time can tell. But it's always good to let your readers share your posts on social media sites. Here's how you can add a Google Buzz button on your Blogger blog.
Update: I made a post on How to add a Google Buzz Button with Buzz Count. Do check it!

For 'New' Blogger Users

If you are using the 'new' Blogger templates, add these lines of code where you want to show the button:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homepageUrl '><img src="http://4.bp.blogspot.com/_FX3RmPElUpc/S3VkcrkMk4I/AAAAAAAAAzc/XkmkEsom8OQ/s144/googlebuzz.png" /></a>

For 'Classic' Blogger Users

If you are still using 'classic' Blogger templates, here is the code you should put just where you want the button to show up:

<a href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcURL=YOURBLOG.blogspot.com'><img src="http://4.bp.blogspot.com/_FX3RmPElUpc/S3VkcrkMk4I/AAAAAAAAAzc/XkmkEsom8OQ/s144/googlebuzz.png" /></a>

Replace YOURBLOG with your blog name.

Let me know if you are having trouble using this code.

Download OpenOffice 3.2

2010-02-12T17:45:00.001+05:30

Open-source office suite, OpenOffice has released the newest version — version 3.2 with many bug-fixes and enhanced features some of which are available throughout OpenOffice applications. This release marks the 10th anniversary of OpenOffice suite. With over 100 million downloads recorded in total, OpenOffice stands as a serious contender for the market share taken by Microsoft Office.

The new features include:

Faster start-up time
OpenOffice now provides improved support for many proprietary file formats including, .docx, .pptx, .xlsx and others
Impress, the Latex editing application now has commenting feature making it easy for collaborative users
Chart wizard now has a new format — Bubble
Calc — default calculator gets lots of new features including better handling of copy-paste and better usability

You can download OpenOffice from the download center. The installer includes Java Runtime Env so that you don't need to install it separately.

4 Fresh Free Icon Sets for Your Next Design Project

2010-02-11T16:01:00.002+05:30

We love free icons. While designing for a client, the first thing (after choosing the color-scheme) one thinks of is the matching icon set. Here are four fresh icon sets that are free to use and looks good!

Iconic Icon Set

103 Icons for free in two different formats — raster and vector. Iconic comes in 14 different colors. So you can easily choose the right color that matches your color scheme.

Download: Some Random Dude
License: CC SA 3.0

Free Set of Office Icons by IconShock

Download: Vandelay Design
License: Free for personal and commercial use

Vector Social Media Icons

This is a set of 50 social media icons. Icons are available in 2 different sizes and 3 different formats — PNG, GIF and EPS.

Download: IconDock
License: "You may use or modify the icons for any purposes. However, you may NOT resell or distribute the icons. If you use these icons, please place a link to http://icondock.com"

330 Free Letter Pressed Icons

A collection of beautiful letter-pressed icons. It includes three PSD files so that you can drag-drop icons into your designs and add styles to them. From objects used everyday to social media icons, the icons are simplistic in look and feel.

Download: Creative Nerds
License: CC

10 Reasons Why You Should Start Your First Blog with Blogger

2010-02-08T08:00:00.001+05:30

It has been a topic for debate among bloggers about whether Blogger or Wordpress is the better blogging platform. There’s no doubt Wordpress has the edge. But if you are a new blogger trying to make your mark in blogging, Blogger is the best option you have. Here are some reasons why you should choose Blogger and no one else!

Free & Easy Sign up

When you are starting off as a blogger, it is likely that you are not going to invest anything except your time and talent in blogging. Since Blogger is free, you can go with it

Custom Domain

If you're not happy with blogspot.com sub-domain, you can create your own custom domain and host the same blog through Blogger.com. And it costs much less than hosting a Wordpress site — generally, domain registration fee for a year is less than $10. If you already own a Blogger blog and pondering over the idea of buying your own domain and hosting it with Blogger.com, you can check this article for more information.

HTML Control

Wordpress.com is free and lets you use custom domains. But you cannot edit the HTML and tweak its functionalities. Blogger does allow you to edit HTML (and CSS) of your blog. Because of this, you can use hundreds of Blogger templates available online.

Blogger Hacks

Blogger has many shortcomings when compared to Wordpress. But power bloggers and developers have made many tweaks to Blogger templates to have features that only Wordpress can boast of. My long-time favorite has been Hackosphere.

Better Integration with Google Products

Since Blogger is a product of Google (Google acquired it in 2003), Blogger's integration with other Google products is better. From FeedBurner to Google Analytics to Adsense, you name it. With new features coming in everyday, you don’t have to worry about integration.

Adsense

Once you strike the right chord and your blog is successful, it's time to earn some money from it. And what's better than Google Adsense. You can show your Adsense ads in a Blogger blog. Unfortunately, Wordpress.com doesn't let users show Adsense ads on their blogs.

No Bandwidth Limitation & 100% Uptime

Hosted on Google's server, Blogger blogs have 100% uptime guaranteed and there's no bandwidth limitations on the content you show. These days, you can't expect 100% uptime from any hosts & even Dreamhost and Rackspace goes offline.

Features

Blogger provides some of the coolest features, like email blogging, feed redirection, openid integration, mobile blogging, multi-language support etc.

Exportability

If you want to move from Blogger to Wordpress, you can export your blog easily. You can even have a backup of all your posts.

Watch How Google Came up with Nexus One

2010-02-06T22:11:00.001+05:30

Google has posted a new video on Youtube Nexus One channel showing how the concept and design of Nexus One came up. This is the first of the series of videos to be posted on YouTube about the process of how Nexus One came into being.

From the video it is clear that Google’s been working on Nexus One for a long time. Right from the days when Android first came up, Google was indeed working on a phone. The rumor-mills were not entirely wrong. It is also evident that working with HTC on Android taught Google about the problems most phones face. With Nexus One, Google has made its effort to make a phone without those shortcomings.

This video also shows why Nexus One has two mics — a first of a kind in a phone. If you want to watch the remaining episodes of the series subscribe to the Nexus One YouTube Channel.

Blogger Adds Pages

2010-02-05T07:12:00.002+05:30

One of the most awaited features on Blogger has finally arrived — you can now create static pages on Blogger blogs, a feature only Wordpress had till date. This is big update for all blogger’s using Blogger as their blogging platform and a big step forward in the growth of blogger as a platform.

The feature was already available in Blogger in Draft but now it's open for all. To create a page in Blogger, all you have to do is to go to Posting > Edit Pages > New Page and create a new page. But unlike Wordpress, Blogger has a restriction in the number of pages you can create — currently Blogger allows only 10 pages for each blog.

In case you are using custom templates, you have to add the following lines of code in your template.

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Put the lines just here you want the list of pages to show up. But if you are using "Classic" templates, there’s no way you can create pages.

[Via Blogger Buzz]

Generate Favicon of Any Domain with Google

2010-02-04T08:11:00.002+05:30

If you are regular with Google Reader, you must have noticed it got favicons all over the feed-list a few months ago. Now, it seems that you can also use Google's technique to add favicons to your web-application. And this favicon is generated directly by Google. Just a little playing around with the URLs can give you the edge.

Here are some of the favicons generated by Google:

Techcrunch:
Digg:
Google:
Gmail:
Yahoo! Mail:
Blogger:

You can generate favicons of any domain by using the following bookmarklet. Just drag and drop it to your bookmarks bar and click to generate.

Generate Favicon

The favicons generated are all 16x16 in dimension. If no favicon is found on the domain Google returns a default icon. Remember the favicons are returned on a domain. So if you add "http://www." before the domain name, it won't work (i.e. it would return the default favion.)

Analyze Your Website with WooRank

2010-01-31T08:24:00.001+05:30

Woorank is a new web-application that analyses your website in almost every aspect. It pulls data from various websites (including Alexa, Google, Technorati, etc.) to analyze various aspects of a site. You can just type in your site address and hit enter. Now wait for the analysis report to be generated. Once done, you can even export the results in PDF format.

With WooRank, it's almost visible how search engines rank your site and what you're missing to tempt them. WooRank also gives you solution of the problems you can encounter with your page. All in all, it's a good tool to measure how your website performs.

8 Google Chrome Extensions for Twitter Addicts

2010-01-30T13:21:00.001+05:30

Finally, extensions arrive on stable version of Google Chrome. This means you don't have to enjoy extensions while using a unstable "crappy" beta of Chromium or Google Chrome. After Google launched the extensions gallery for Chrome, more and more extensions are being added everyday. Here are a non-exhaustive list of Twitter extensions on Google Chrome.

Metrist — Twitter Client

Metrist is probably the best Twitter client I have come across. It provides a tabbed interface for timeline, replies, messages. What makes Metrist different from other Twitter clients is how it empowers you to customise features. You can specify the font-size, the number of API calls. It also offers a URL field for making API calls. For developers and geeks, it provides a console which logs all traffic made by Metrist.
Extension Page | Direct Install

TwitterWatch - Real Time Twitter Update

TwitterWatch is a cool extension to find out what people are talking about. Just type a few keywords you want to search and hit enter. Now, see the stream of updates. Pretty rad and useful. (I have been using this technique to find useful resources from Twitter. Whether you're a developer or a simple computer user, Twitter can be great for finding stuff you need.)
Extensions Page | Direct Install

Twitter Theme

Don't like the way Twitter looks? Install Twitter theme extension and get a new UI. Simple, easy and good looking.
Extension Page | Direct Install

P.S.: There's one more theme &mdash Pink.

Fast Twitter Search

It's much like TwitterWatch but takes you to Twitter instead of showing up a pop-up with search results. Worth giving it a try, if you don't hate going to Twitter everytime it shows search results.
Extension Page | Direct Install

Twitter share this page

Sharing a page you're reading is just a click away. Install this extension and there will be a small twitter icon on every page you open. Click on it and share on Twitter. It also shortens URLs if it's long enough.
Extension Page | Direct Install

Twitter Reactions

It's like Tweetmeme or Topsy but you don't have to visit another page to find out how many times a page has been tweeted. A small blue icon on the right gives you all you need!
Extension Page | Direct Install

Chromed Bird

The most popular twitter client for Google Chrome. It gets a new feature almost everyday. The latest version supports lists, creates short URLs on the fly, and many other updates. If you don't use it, you're missing out a lot!
Extension Page | Direct Install

Chrowety

Yet another Twitter client for Google Chrome. Offers a cool UI and all-in-the-box features. The UI is much like Google Wave. It supports a number of URL shorteners. Comes in 7 different languages!
Extension Page | Direct Install

If you want to share your favourites, the comments section is for you!

14 Google Chrome Extensions to Boost Your Productivity

2009-12-17T21:44:00.001+05:30

Google has recently opened up its treasure trove of Google Chrome Extension gallery (say bye to Chrome Extensions). And within days of its arrival, people have downloaded the extensions some hundreds of thousands of times. With new extensions being added every day, Firefox (as a platform) is losing its place. More and more people are switching to Google Chrome as their default browser. Here are some extensions that you may like to add to Google Chrome.

Google Mail Checker

Developed by Google, this extension may remind you of the Gmail Notifier. Unlike the Firefox add-on, Google Mail Checker doesn't ask for Google account credentials - it uses Chrome's cookies to log into Gmail inbox. Number of new unread mails are highlighted in red.

Zoho Notebook

Well, Evernote may be your favourite note-taking tool, but if you haven't checked Zoho lately, you're missing out on a lot of things. None can organize your notes as effectively as Zoho Notebook does. And now, all this in the form of a tiny extension. You can clip the URL of the page you're currently browsing; you can take a screenshot of the page or you can clip selected text to Zoho Notebook with this extension.

RSS Subscription Extension

Google Chrome lacked a very basic feature that Firefox boasts of, for a long long time — RSS subscription option in the address-bar (called the Omnibar). Addressing this 'problem', Google developed this extension to give quick access to subscription options.

Xmarks Bookmark Sync

"Xmarks is the #1 bookmarking add-on. Xmarks synchronizes across multiple computers, and across web browsers: Chrome, Firefox, Safari and Internet Explorer. After you install the add-on, click on the notification to set up Xmarks and start backing up and synchronizing your bookmarks. Xmarks sync profiles give you full control over which bookmarks are synced to which computers, allowing you to keep private bookmarks at home while syncing everything else to your work computer. Xmarks automatically keeps a backup of each bookmark change, making it easy to backup and restore your bookmark sets." Download and enjoy!

LastPass

"LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure. LastPass supports Chrome, Firefox, and IE as Plugins (Opera, Safari, Opera Mini via Bookmarklets), allows you to import from every major password storage vendor (such as Roboform, Keepass, PasswordSafe, MyPasswordSafe, Sxipper, TurboPasswords, PassPack, Firefox and IE's built in password manager) and export too, captures passwords that other managers won't including many AJAX forms, and allows you to make strong passwords easily. Your sensitive data is encrypted locally before upload so even LastPass cannot get access to it. One Time Passwords & Screen Keyboard help protect your master password." (See also: Keepass Password Manager)

Feedly

"A magazine-like startpage. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon." Once you install this extension, you would why it's your new addictive homepage.

Chromed Bird

It's a Twitter client inside Chrome. It has (almost) all the feature Twitter offers. The developers are quick to add new features to Chromed Bird as they are being introduced in Twitter.

Google Reader Notifier

"Displays the Google Reader unread count. Clicking the icon shows a preview of your reading list in a popup (or it can open Reader in a new tab, see the options page for configuration)." Great extension for Google Reader fans.

Aviary Screen capture

Remember Screengrab add-on for Firefox to take screenshots of web-pages? Well, this extension does more than what Screengrab offers - you can also edit the screenshots taken, through Aviary Image Editor.

Firebug Lite

Web-developers, rejoice! Firebug finally for Google Chrome. One of the reasons why many developers were reluctant to turn to Google Chrome was that they were missing Firebug, the have-it-all web-development add-on for Firefox. Firebug Lite misses out on a lot of things Firebug-on-Firefox offers. Considering the number of people switching to Google Chrome, Firebug Lite will definitely see some major updates in near future.

IE Tab

Another very useful extension for debugging IE style errors. This extension displays any webpage using Internet Explorer rendering engine. Webpages which can only be displayed in IE can be viewed inside Google Chrome without leaving it.

Shareaholic

Shareaholic is a web-application, "The Better Way to Share Across Twitter, Facebook, E-mail, and More." This extension gives one-click access to share links to different networks. You can create an account with Shareaholic to choose which of the services to show. By default, it creates a shortened link of the page you're browsing (using Bit.ly), so you can also use it as an alternative for Bit.ly's extension.

Google Tasks

Are you a Google Tasks fan? Then, this is for you! It might not as simple and effective as Remember The Milk but Google Tasks is well integrated with almost all Google applications. Besides, lot more features are being added to Google tasks. This extension lets you add, edit and mark tasks (as done).

Wikipedia Chromium Edition

"Wikipedia Chromium Edition gives you one click access to your favorite encyclopedia. Search and browse Wikipedia right on the webpage you are viewing. Must have extension for all Wikipedia fans." My favourite!

22 Screencasts to Teach You Photoshop Basics

2009-12-14T22:06:00.002+05:30

I meet a lot of people who say that they are fascinated by photoshop and the artworks it creates. But either they hardly have the time and patience to learn photoshop or they don't know where to start. Here are few of the hundreds of screencasts that teach you Photoshop basics.

Photoshop 101: Learn About the Tools Palette

Photoshop 101: 50 Minutes of the Basics of Photoshop

Basic Photoshop Tools

Photoshop Tutorial — Tool Uses and Basics

One Minute Makeover

Basics of Photoshop Painting

Photoshop CS3 Tutorial: The Basics of Pen Tool

The Basics of Selection

How to Use the Magic Wand Tool in Photoshop

Basic Photoshop Tutorial: Cropping Tutorial

Learn How to Use the Slice Tool in Photoshop

How to Use Patch Tool in Photoshop

Photoshop Tutorial Brush Tool

Photoshop Clone Stamp Tool

Photoshop Tutorial How to Use and Master the History Brush Tool

Photoshop Magic Eraser Tool

Photoshop Gradient Tool Techniques

Basic Photoshop Tutorials: Photoshop Blur Tool Tutorial

Basic Photoshop Tutorials: Photoshop Sharpen Tool Tutorial

Photoshop Tips & Techniques : Adobe Photoshop Smudge Tool Tips

How to use the Dodge Tool and Burn Tool in Photoshop Tutorial

Photoshop: The Pen Tool — In Depth

Create Your Own Online Office with OpenGoo

2009-12-06T07:11:00.002+05:30

OpenGoo is an open-source online office solution. If you are looking for web-based application that can be a good alternative to Google Docs or hundreds of task management and project management apps, OpenGoo might be your answer. Built on the excellent ExtJs javascript application development platform, OpenGoo can be installed on any modern web-server running PHP and MySQL (with InnoDB support). Download the zip file, unpack it, upload to your server, and after a super-simple installation, you're up and running!

OpenGoo is a modular application which uses various modules such as 'Notes' (for taking notes), 'Contacts' (for managing contacts), Calendar and Tasks (for managing tasks and appointments), 'Web Links' (for bookmarks), 'Email' (for sending and receiving emails!) and a 'Time' module (for managing your time). The task module is very effective and feature-rich. Apart from adding and completing tasks, you can create 'milestones' which, in turn, may contain various tasks. OpenGoo uses 'workspaces' to keep you focussed and clutter-free. You can create different workspaces for different projects, goals. Each workspace uses the same modules (you can turn off certain modules too).

OpenGoo is great for collaborative works. You can create users and assign tasks to them. Each documents show revisions which help you keep track of who edited what and when. You can even create clients and show them only certain amount of data (ideal for ongoing project status).
Not everything is great about OpenGoo. The current version of the application is 1.6 but it still lacks .doc, .pdf support. Spreadsheet module is also missing. The document editor is much like wordpad on Windows, nowhere close to Microsoft Word or Open Office Word Processor. If you are heavy Google Docs user, you might also miss the Drawing feature Google Docs provides. Although the OpenGoo wiki says that it supports themes, I found no fitting themes for OpenGoo. Since it's written on ExtJS, ExtJS themes should theoretcally work with OpenGoo. But, in fact, they looked horrible.

OpenGoo is ideal for schools, small companies, freelancers, group of people involved in certain projects. If Google Apps and Zoho pinch your pocket, go for OpenGoo. Also, it's much more secure since you're installing it on your server — not into the clutches of some web-firm that blunders with the security of your documents.

PlayListNow Lets You Listen to Music Based on What You're Doing

2009-12-03T07:47:00.000+05:30

PlaylistNow.fm is new web-application that generates playlists based on what you're currently doing. Whether you're partying or working at library or focusing on your work, PlayListNow has a playlist for you. In case, you don't like the songs you are listening to, just sign up (using Facebook or Twitter) and start adding customising the playlists. You can also discover new songs from the recommended songs.

The interface of PlaylistNow at first glance may look like Twitter's landing page. It also offers a bunch of keyboard shortcuts for easy navigation. You can even share playlists with your Facebook network or Twitter followers, right from PlaylistNow.

It's a nice application to find new songs but may not be useful since it still doesn't have any iPhone app.

QuickTip: How to Quickly Test HTML and JavaScript Snippets Through Addressbar

2009-11-23T19:23:00.004+05:30

Most web-applications offer snippets of HTML or Javascript codes to be embedded in your blog. From Facebook to Youtube, almost all web-applications follow this trend. But before you embed that widget in your website, you might want to see for yourself how it looks like — only the widget. Here's how you can do the same right from your address-bar.

All you have to do is to paste the snippet in your address-bar and prepend data:text/html, (note the comma) to it and hit enter! Your widget is on the page! For instance, if you have a YouTube "embed video" snippet like this:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bPfPK59weT8&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bPfPK59weT8&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

After you add data:text/html, it looks like:

data:text/html,<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bPfPK59weT8&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bPfPK59weT8&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

On Chromium it looked like this:

Note that it works on Google Chrome, Firefox, Chromium. I haven't tested this in Opera or Safari. It definitely doesn't work on Internet Explorer!

Google Chrome OS Videos

2009-11-20T17:03:00.002+05:30

Google has open-sourced the source-code of its much-hyped operating system, today. The operating system is far from ready for regular use but you can still try it out — a VMWare image is up for grab at The Pirate Bay. Download the VMWare image and follow these steps to run Chrome OS. But in the meantime, you can watch these videos on Google Chrome OS.

Google Chrome OS Concept Video

This video shows the 'concept' UI of the operating system. Although Google claims that there will be significant changes in the UI, the current UI is much different from what is shown in the video.

What is Google Chrome OS?

Google's famous animated take of showing off products.

Pirate Bay Shuts Down Its Tracker

2009-11-18T13:51:00.000+05:30

The Pirate Bay has officially shut down its BitTorrent tracker. After months of speculation about its fate, TPB has officially announced that the tracker is going offline forever. This, however, doesn't mean all your torrents with The Pirate Bay as the sole tracker would meet a horrible death. The Pirate Bay guys claim that trackers have become redundant with DHT or PEX which works without the need of a centralized server. The blog post further discusses the issue.

What's more threatening to the pirates is that TPB says it's going to talk to other torrent tracker providers to take their trackers offline. This will mean virtually no centralized servers to share your data. The server-less sharing has pros too. You won't curse the tracker when it's offline. In fact, nothing would change - you can still upload .torrents and download from TPB, the only thing missing is the tracker.

Upload Photos to Facebook Right from Desktop

2009-11-15T13:47:00.000+05:30

Facebook has become a great place to share photos. Apart from Flickr, Facebook is a "hot" place to share photos. Almost everyone in Facebook has a photo-album (besides, the default 'profile pictures' album, of course). Although Facebook has a Java-based multi-file uploader, it can be a pain to upload photos to Facebook at times. Fire up your favourite browser and go to Facebook and go to photos and...

How about a shortcut? How about a uploading them right from your dekstop without hassles? Well, Facebook LiveUpload is a plugin for Windows Live Photo Gallery that does the same. All you have to do is to install the plugin (of course, you need to install Windows Live Photo Gallery or Windows Live Movie Maker in order to use this plugin). Once installed, you are ready to use the plugin -- under Publish > More Services, you'd find "LiveUpload to Facebook" option.

You can create/choose Facebook photo albums through Facebook LiveUpload. What's more, if you have tagged people in photos through Windows Live Photo Gallery, your uploaded photos in Facebook will include those tags, too!

Download Paint.NET 3.5

2009-11-10T09:33:00.000+05:30

A newer version of Paint.NET has been released today. Paint.NET is a photo-editing software that runs on Windows under .NET framework (v3.5 SP1). It is a better version of Microsoft paint, with support for layers, multiple undo, redo, and several effects that Adobe Photoshop boasts of.

The new version is much more lightweight than the earlier ones (the total disk space usage is around 12 MiB). This new version integrates with Vista and Windows7's Aero interface. The one most striking new feature is that you no longer need to restart the whole application to let Paint.NET recognize newly installed fonts -- the new fonts toolbar enlists new fonts as they are being installed. You can find the whole list of new features here. If you need a not-so-serious photo editor, Paint.NET is for you.

Google Wave Invite Giveaway: Claim It Here!

2009-11-07T10:14:00.006+05:30

Google's most ambitious project Google Wave has been launched as a developer preview to 100K developers around the world. And blogosphere is abuzz with lot of things to say about it. Even eBay users are selling Google wave invites.

Here in AbhiTech, I am offering 15 Google Wave invites to readers! All you have to do is to subscribe to AbhiTech (by email; see the form in the right sidebar) and leave a comment to this post stating why you want a Google Wave invite. Please note the following:

Before you leave your comment, you must subscribe to AbhiTech by email. Don't forget to activate your email subscription. Or else email addresses won't be shown to me.
Those who are already subscribed to AbhiTech by email, please state that you are already subscribed.
In your comment you must include your email id (except the domain, i.e. if your email is user123@gmail.com, just state "my email starts with user123").
In case the number of comments exceeds the number of invites to be sent, random comments will be selected. If so happens, Random.org will be used.
You must state why you want a google wave invite. Incomplete comments will be rejected.
Also note that since these invites are sent by users (not by Google), it takes a few days to reach you. To quote Google: "Invitations will not be sent immediately. We have a lot of stamps to lick."
Contest will end on 20th November, 2009.

Bring SkyDrive to Your Desktop

2009-11-02T11:14:00.000+05:30

Microsoft’s not-so-famous cloud backup service Skydrive offers 25 GiB of web-space. Yet it has got less takers than Dropbox. That’s because it doesn’t have a desktop client even after more than 2 years of its launch. Dropbox gets an edge just because it offers a cross platform desktop client that seamlessly syncs your data.

Now, you can upload and download data from Skydrive without having to open your favorite browser, thanks to SkyDrive Explorer. It’s a tiny standalone Windows shell extension. All you have to do is to install SkyDrive Explorer and start enjoying SkyDrive features as a separate drive in Windows. After you install this program, you’d find a new drive under “Other” category. Double click on it and provide your login credentials. Once you are logged in, just copy paste files from your PC to this new drive, and they get uploaded to SkyDrive. But you can't view files right inside this drive — just copy the files to your local drives and open them.

SkyDrive Explorer works on both 32-bit and 64-bit versions of Windows and runs on Windows 2000, XP, Vista and Windows7. But I didn't have much luck in running it on XP. It worked fine in Windows7. Since it's in beta stage, future releases may address this issue.

Twitter Lists Arrive, Finally

2009-11-01T05:59:00.003+05:30

Twitter today launched its much awaited and much hyped ‘lists’ feature. The blogosphere was abuzz with talks of Twitter working on lists. And Twitter indeed tested this in private beta. Today it’s open for everyone, although in beta.

Lists are groups of Twitter users you can create (and name) for everyone to see and follow. To quote Twitter, “Lists are timelines you build yourself, consisting of friends, family, co-workers, sports teams, you name it.” You can also create private lists which can be accessed by you only.

Lists are different from ‘groups’ since lists behave more like individual users — you can follow/unfollow lists. Once you start following a list, updates from the users in the list will appear in your timeline. But lists can be used as groups to sort people whom you follow and see what they are talking about.

Turn Any Photo into a Beautiful Painting with FotoSketcher

2009-10-30T07:53:00.002+05:30

So you are not happy with the pictures you have taken during the holidays and you just want to trash them. Wait a sec. What if they look great when you put them into the FotoSketcher? Well, it’s a tiny portable application that turns your photos into paintings. And that too in a just a couple of clicks.

FotoSketcher is simple in its use. You don’t even have to install it — just open an image file in FotoSketcher and select your own settings. There are various styles available: pencil sketch, pen and ink drawing, various painting renderings. There’s a gallery showing some creations by FotoSketcher users.

5 Applications to Monitor Bandwidth Usage

2009-10-27T20:40:00.001+05:30

Most broadband users in the USA or Europe enjoy unlimited bandwidth. But not everyone is fortunate enough. In India, BSNL (the largest broadband provider of the country) offers various packages but most of them has bandwidth limitations. Once your bandwidth allocation is over, you have to pay more for additional usage. In such cases, it is useful to keep a record of how much bandwidth you are using. Here are some bandwidth monitors that comes handy to keep a tab on bandwidth usage.

FreeMeter

FreeMeter is tiny standalone application that runs on .NET framework 2.0. It requires no installation. Once you start the program it shows graph containing the usage details. You can change the update interval.

It also offers a ping and trace-route utility. You can view records of monthly, daily or weekly bandwidth usage. So much in just 118KiB!

NetMeter

NetMeter has a much more pleasing interface and offers more features. It can even generate a projected bandwidth usage on monthly, daily or weekly basis. You can specify which networks to track and which not to. This is useful if you are connected to several networks.

iTraffic

iTraffic is yet another application good at monitoring bandwidth usage. Apart from the graph showing network traffic, iTraffic also lets you select specific interfaces to monitor. You can even select IP addresses to ignore network traffic. (It uses WinPCap to do so.)

BitMeterOS

BitMeterOS is a cross platform bandwidth monitoring tool written in C. It can monitor or ignore specific networks only. You can also use it from commandline. BitMeter can be run as a Windows service, i.e. it runs in the background once your system is up. It also offers an audio notification every time a certain amount (to be fixed by the user) of data is transferred (uploaded or downloaded).

vnStat

vnStat is a commandline-based bandwidth monitoring tool which runs on Linux and BSD platforms. In ubuntu you can install it by:

sudo apt-get install vnstat

Once it is installed, just type vnstat to view traffic logs. vnStat can monitor specific networks only and it creates a separate database for each network interface. You can even view the logs in your browser. This post has detailed instructions about how to do the same.

Around the Interwebs #3

2009-10-25T07:04:00.000+05:30

YouTube Goes the Twitter Way, Beta Tests Real-time Comment Search

2009-10-20T06:49:00.001+05:30

YouTube is beta-testing real-time comment-search. This new feature, available at Test Tube, enables users to search for comments in real-time — keywords are searched in comments as they are being posted in YouTube.

It also shows a list of "trending topics" — popular search terms. This new feature is a reminder that almost all social media sites would finally have to go real-time.

Via: YouTube Blog
Tags: YouTube, Google

Get Windows 7 Tips Daily with Win7 Countdown Widget

2009-10-19T07:02:00.002+05:30

With only 2 days to go before Windows 7 hits the stores, Microsoft has released a countdown widget that gives you 'valuable' tips about customising Windows 7. You can embed this widget to your Facebook, MySpace profiles, Blogger sidebar, iGoogle gadget among many other places, to show your Windows 7-love.

The widget shows a new tip daily. You can tweet the current tip that's being shown. Since it's a flash widget, unfortunately you can't style it your way.

Tags: Windows 7

eBay Users Auction Google Wave Invites

2009-10-02T08:28:00.000+05:30

Ever since Google has announced that they would be sending 100000 invites for Google Wave, there has been a lot of buzz over the 'net — 'Google Wave' finds a pretty place in Twitter's trending topics for some time now. And now, some eBay users have started selling their Wave invites for anything between $0.99 and $89.

This is not the first time that web-application invites are being sold on eBay. Desitorrents, the leading Indian forum, stopped giving invites to its users when someone auctioned an invite.

I think web-applications should be designed in a way so that invites cannot be transferred, i.e. an invite can be used by a certain email address only. Again, Google Wave is a social application. This means Wave is completely useless if your friends and family (or colleagues) are not using it. It's pretty interesting to see people wasting money on a web-application invite, at a time of financial turmoil.

[Via The Wall Street Journal]

Back up Browser and Email Profiles with MailBrowserBackup

2009-10-01T14:07:00.000+05:30

Have you ever missed your favourite bookmarks while surfing the 'net from your friends PC? Do you always search for instructions for setting up email profiles for email-clients? If so, MailBrowserBackup is for you. It's a tiny utility (only 508 KiB) that backs up email-clients and browser profiles. All you have to do is to restore profiles from the back-up files.

The list of browsers, email clients, instant messengers it supports is a long one.

Mozilla Firefox
Flock
Windows Mail
Windows Live Mail
Windows Live Messenger
Windows Live Messenger Plus!
Internet Explorer
Outlook 2003/2007
Windows Contacts
Windows Calendar
Mozilla Thunderbird
Opera
Apple Safari
Google Chrome
SRWare Iron
FileZilla FTP Client
Notepad++
Pidgin

MailBrowserBackup runs on .NET Framework 2.0+. It's free and open-source and installation is super-simple.

It's a very useful application. But with more and more people switching to cloud-computing, back-up utilities like this one will find few takers.

6 Portable Application Suites to Power up Your Thumb Drive

2009-09-25T06:12:00.002+05:30

USB drives are cool — they are small in size, can contain lots of stuff, and they are not costly at all. But in case you are using USB drives to only transfer files from your home to office, you are not tapping all its potentiality. USB drives can be used to carry your entire office (ok, only the softwares I am talking about.) And instead of downloading hundreds of portable applications you can just use some of the available portable application suites that has it all. Here are 8 popular application bundles.

Tiny USB Office

Tiny USB Office is an application bundle which is only 2.5 MiB in size. The applications it contains are mostly productivity applications. The applications include:

Database Creation - with CSVed
Data Encryption - with DScrypt
Email Client Software - with NPopUK
File Compression - with 100 Zipper
File Sharing - with HFS
File Transfer - with FTP Wanderer
Flowchart Creation - with EVE Vector Editor
MSN Messenger Client - with PixaMSN
Tree-Style Outliner Software - with Mempad
PDF Creation - with PDF Producer
Password Recovery - with XPass
Secure Deletion - with DSdel
Spreadsheet Creation - with Spread32
Text Editing - with TedNotepad
Word Processing - with Kpad
Program Launching - with Qsel

It also includes text encryption program, a secure file shredder, a password revealer, and a tiny vector editor. This is a good choice if you have very little space to allocate.

SSuite Office

SSuite Office bundle contains basic office editing applications including a word-pad, a spreadsheet editor, a basic photo editing application, an application launcher among other applications. All this in 14MiB. This is a good choice if you want to play safe with office suite, just in case you need them.

Portable Apps Suite

This is probably Internet's most popular portable app suite. Portable Apps Suite comes in three variants — platform only, light suite and standard suite. The lightest version starts at only 1mb download size and the standard suite is 355MiB in size, when installed. For average users, the light suite is recommended. The light suite offers a bunch of useful applications including Firefox, Thunderbird (email client), Sunbird, ClamWin Portable (anti-virus), Pidgin (IM Client), Keepass Portable (password manager). The standard suite has OpenOffice included. All these versions come with a sleek Windows-XP style menu that gives access to all the portable applications available. After you install it on your USB thumb-drive, it creates folders like "Documents", "Pictures", "My Music", "Videos". This is pretty neat and lets you organize your files easily.

Lupo Pen Suite

Lupo Pen Suite is another application bundle which has a lot of things in common with Portable Apps — it has menu which resembles that of Portable Apps; it creates folders like Portable Apps and so on. The applications included are, however, different from those included in Portable Apps. The email client in Lupo Pen Suite is POP Peeper, the IM client is Miranda IM. It comes with VLC Player, FastStone Image Capture, System explorer among many other useful softwares. If you are looking for a full-featured application suite, Lupo Pen Suite is just for you. Way better than Portable Apps suite.

LiberKey

Liberkey is probably the most under-rated yet the best of all portable application bundles. It comes in 3 flavours — basic, standard and ultimate. It packs a huge number of applications. The interface is pretty intuitive. Since it offers so many applications. it comes with a search utility which searches the 'installed' applications.

MojoPac

MojoPac is a sophisticated application suite that turns any removable drive into a PC (kind of). You can install various applications on MojoPac, including Midrosoft Office. If you are a gamer, MojoPac can carry your game with it. This application suite is different in one perspective too — it is password protected. That means you don't have to worry about the security of your data in case your drive is lost (or stolen). [Related Password Protect Your Files with TrueCrypt]

Picasa 3.5 Arrives with NameTags

2009-09-23T07:06:00.000+05:30

Google's free photo-editing software, Picasa just got better — it can now recognize people's faces. The latest version (v3.5) lets you add name-tags to people's faces for easy grouping and searching. This version also integrates with Google Maps for geo-tagging.

Whenever a photo is collected via Picasa with 'unknown' (i.e. not yet tagged) faces, it creates an album — Unnamed Faces — to which you can add tags later on. You can even search for photos with two people in it (i.e. having two tags). For ease of use, name-tags offer auto-complete so that you can easily select the tags you have already created.

This version is a great step forward enabling desktop apps behave like human minds. It would be great if Picasa can integrate Facebook's facial recognition for the Picasa Facebook Uploader. That would be a lethal combo!
[Via Official Google Blog]

Google Acquires reCaptcha, Vows to Stop Spam

2009-09-17T08:30:00.000+05:30

Google has acquired reCaptcha, an open-source application developed by the computer science department of Carnegie Mellon University, to protect pages from spams. The details of the deal are not available although some people are irked about the fact that the project was originally funded by government and the founders are making money out of this.

The official announcement says,

(...) we're excited to welcome the reCAPTCHA team to Google, and we're committed to delivering the same high level of performance that websites using reCAPTCHA have come to expect. Improving the availability and accessibility of all the information on the Internet is really important to us, so we're looking forward to advancing this technology with the reCAPTCHA team.

The acquisition move will certainly improve the way reCaptcha works as we have seen in past that services (like Feedburner, Blogger) got better once they were acquired by Google. It's just a matter of days (or weeks) before reCaptcha gets integrated with Google's platforms.

[Via Official Google blog]

How to Add A Blogger.com Blog to Facebook

2009-09-13T14:25:00.000+05:30

Facebook is a great place to share stuff — from links and videos to photos and status updates. The Facebook 'Pages' are useful if you are a blogger and want to share your posts in Facebook through a completely personalized page. You can also import your blog to your profile through the 'Notes' application but a separate page for your blog is better since it makes your blog separate identity from yourself which has a brand value. Besides, a Facebook page offers widgets and more.

To add a page in Facebook, visit this page and fill the fields given their. Here are the settings for AbhiTech page on Facebook .

Once the page is created visit this page. Among the applications listed there, choose the 'Notes' application and click 'Edit'.

On the settings page, click on 'Import Blog' at the right side. Here you have to enter the feed-URL of your blog.
Now, you can enter the feed URL of your blog for full content of the posts. But this will significantly decrease the page-views of your blog since most Facebook users will read your posts right from Facebook. How about showing only part of your posts?
Blogger offers a summary feed containing only a part of your posts. Just use this URL for importing feeds:

http://YOURBLOG.blogspot.com/feeds/posts/summary

(Change YOURBLOG with the name of your blog.)
That's it!

One More B'Day Gift: Blogger Brings Jumpbreak Feature

2009-09-12T18:36:00.000+05:30

As a celebration of its 10th birthday, Blogger has introduced long-awaited jumpbreak feature — something native in Wordpress for a long time. Jumpbreak allows bloggers to let their readers to jump to 'item' pages for the full content of post. "Read More" and "Continue Reading" are two of the most popular jumpbreak texts.

All you have to do is to include  anywhere in your post and the text following this can be seen only on the 'item' page.

You can even change the jumpbreak text — just edit the "Blog Posts" widget. This feature is not for classic template users. A help article is available on the blogger support page for template tags.

This feature brings an end to numerous template hacks. This blog, for example, uses a JavaScript snippet to create jumpbreak texts. In case you are a classic template user, you can find the snippet and instructions at Quite Random.

[Via Blogger Buzz]

Google Search Field Gets Bigger, Still Bing Tops Results

2009-09-11T08:29:00.001+05:30

Google has changed the size of the the input field of the search-box to symbolize Google's "focus on search and because it makes our (Google's) clean, minimalist homepage even easier and more fun to use." The text-size of the auto-suggest entries has also increased for a more clear vision.

Yet, it's interesting that Google ranks Bing ahead itself in terms of search results. Just make a search with "search" and see it yourself. In case Google has changed it, you can see a screenshot on AbhiTech's Facebook album.

Quickly Open or Save Files in Windows to Your Favourite Folders

2009-09-08T19:03:00.001+05:30

The default Windows 'Save As...' or 'Open' dialog box has five different shortcuts on the left hand side — History, Desktop, My Documents, My Computer and My Network Places. As a matter of fact these are not shortcuts at all — you have to browse to some other folder of your choice. What if you can customize these links, much like Linux desktops?

Enter Places Utility. It's a nifty application that does this job with ease. It offers a very intuitive options dialog, which lets you configure the shortcuts.

Once you set up these options, it changes the Open or Save As... dialog with the custom settings.

If you are download-heavy user or if save a lot of web-contents to your machine, this utility is just for you. Even for average users, this application is useful as it gives quick access to the places you most likely to save files.

Places Utility is available for free at Simpli Software. It's 622KiB is size.

Download Seven Remix to Turn XP into Windows7

2009-09-07T13:23:00.001+05:30

Seven Remix XP is a transformation pack for Windows XP which turns the default XP interface into one that resembles Windows 7. It changes almost all visual styles in XP — from icons to wallpapers to login screen. The core remains the same but just a visual makeover, in case you are tired of looking at the same old Windows XP interface.

The package contains an executable file which changes the core visual styles of XP. All you have to do is to install it and reboot. In case, you mess it up, the installer automatically creates a system restore point. This way you can easily go back to your previous XP interface.

The installer is developed by NirwadSoft while the visual styles it offers are designed by Vishal Gupta. The biggest problem with this Windows7 transformation pack is that it doesn't support 64bit versions of WindowsXP.

You can download it from DeviantArt page.

Yahoo! Meme Walkthrough and Invite Giveaway

2009-09-06T17:00:00.001+05:30

Yahoo! has recently launched Meme, "where you share everything you find that's interesting". Meme is, in simple English, a micro-blogging service with some more features that Twitter lacks, at least as of now. The service is in alpha stage. You can leave your email address at the homepage for an invite. Alternately, you can send me your email address (or leave a comment with your email) in case you don't want to wait.

The idea is simple: you follow other Meme users, repost their posts, share your own links, videos — much like Tumblr.

I got an invite yesterday. But just after clicking the link that came in the email, I found this page, and the page says it all why it's in alpha stage.

The interface is dead-simple. Once you login, a tabbed interface along with recommended users greets you. The tabbed interface may remind one of Facebook.

The settings provided by Meme are very basic. This might be because Meme is at a very basic stage.

Unlike Twitter which allows users to select the backgrounds of their profile-pages, Meme offers only 6 themes. Typical of Yahoo products. (Remember Yahoo 360?)

In short, Yahoo Meme is yet another microblogging service with few more things to offer. It's Twitter plus Tumblr plus a little bit of Facebook. A bookmarklet to share links would have been better. Also, a chat bot would find many takers. Maybe all these will come in a few days. Keep your fingers crossed.

Firefox 4.0 Headed for Q4 2010 with a Brand New UI

2009-09-04T21:18:00.000+05:30

It's official: Firefox 4.0 will sport a brand new UI. But you have to wait until the last quarter of 2010 to experience it. The mockups for the new interface have been posted, and they have not much difference from Firefox 3.7 mockups. It is evident that Firefox is going the Chrome way.

Version 4.0 will have a faster Javascript engine called Tracemonkey. The new version will also make use of Windows7 graphics features. So you can expect more animations, and probably slower performance.

Firefox is a browser. All it needs is speed and an uncluttered interface, not animations or high-def graphics. Also, this new UI may be different for various platforms. This might irk some people. The mockups heavily flout the guidelines provided by Microsoft (see this), just as Google chrome does.

One Click Translation with gTranslate

2009-09-02T08:14:00.000+05:30

gTranslate is a firefox add-on that offers super-simple translation, from Google Translate. It offers translation from any of the 25 languages available with Google Translate. All you have to do is to select some text (which you want to translate and right click, go to "Translate". No more copy paste.

gTranslate makes use of Google translate API and sends the selected text to google translate. Google translate sends back the translated text. All this happens in a blink of an eye. You can choose the language pair by going to the "Change language" option.

When you click on the translated text, a new tab (or window, depending on your Firefox preferences) opens up with Google translate page so that we can see all the translated text.

Google Docs Breaks Barriers, Allows You to Translate in 42 Languages

2009-08-28T06:55:00.002+05:30

Google Docs has rolled out a major feature — you can now translate documents into 42 different languages, right inside Google Docs. That means no copy-paste into Google translate anymore.

To translate a document, just go to Tools » Translate Documents and choose the language of your choice. Google automatically detects the language the current document is written in.

Although translate technologies on the 'net are not reliable, this feature is a good one. This integration will certainly help people collaborate with non-english speaking world.

Around the Interwebs #2

2009-08-27T08:20:00.001+05:30

Disqus 3.0 is coComment 2.0

2009-08-26T09:39:00.000+05:30

Disqus, the popular comment engine that can be integrated to almost every web-page, has got a makeover. Disqus now offers two services — one for webmasters who own and maintain websites or blogs (called Comments), and one for those who post comments on blogs (called Profile). But the comment engine remains the same which means you don't have to reinstall JavaScript snippets.

The profile page is more organised now — it gives easy access to the replies to your comments, along with "Subscriptions".

The Comments (previously the Admin page) is more sane now. You can easily mark multiple comments as Approved or Spam. Also you can search comments.

It reminds me of almost-forgotten coComment, which was once very popular. coComment tracks your comments across the web, even in forums. Since more and more bloggers are switching to Disqus, it won't be too much to say that Disqus will track comments across the web.

Now, Tweetmeme Gets a Shortener

2009-08-26T08:44:00.000+05:30

It is raining URL shorteners these days. Tweetmeme has come up with a new URL shortener — Retwt.me, including an API. It shortens URLs — like any other URL shortener — but the advantage is its integration with Tweetmeme.

Unlike most URL shorteners, Retwt.me doesn't create yet another short code for any URL that has already been shortened. (See our tutorial on creating your own url shortener from scratch.) This significantly decreases pressure from database.

Taking a dig at tr.im which recently said they would close down, Nick Halstead, Tweetmeme founder said, "we pride ourselves at TweetMeme for the continued up-time and scalability of the service." This sums up why they are here in the URL shortening business.

Retwt.me offers almost all the features Bit.ly currently offers. Bit.ly is probably the better choice between these two since retwt.me has two more letters in it. Given the growth of micro-blogging experience, two letters will eventually make a lot of difference.

Around the Interwebs #1

2009-08-22T10:30:00.003+05:30

Back up The Pirate Bay with 21.3GB Index File

2009-08-21T09:19:00.002+05:30

Now that The Pirate Bay is sold and it is heading towards an unknown phase of its lifespan, an anonymous TPB user has created a massive 21.3GiB torrent file which contains 873671 torrent files uploaded to TPB till 13th Aug 2009. The torrent also contains a mock-up website which can be run on a local server. Simply put this torrent lets you create another The Pirate Bay.

The trackers for this torrent include OPENBITTORRENT.COM so that in case TPB closes down the torrent still works. Since the torrent contains all the files from TPB, you should expect a few virus and malware stuff.

Although TPB has long claimed that they are tracking more than 2 million torrents, the index file contains only 873671 torrents. The uploader reasoned,

I only got 873671 torrents, but according to the website the tracker tracks over 2 million torrents. The discrepancy is most likely due to many torrent files including the TPB tracker but has not been uploaded to the web site.

The good news is that BTARENA, previously a well-known torrent blog, has put up a copy of this torrent. You can browse, download and share torrents which are available in TPB through BTARENA. The site works perfectly except the search feature, which will be fixed as the admins claim.

Although the uploader posted the torrent anonymously, (s)he can be a TPB stuff. Only TPB admins have access to htdocs — files needed to run the site — through FTP.

Carry Your Passwords with KeePass

2009-08-19T15:58:00.004+05:30

KeePass is a freeware open-source utility to store and manage your passwords. It boasts of high security and a number of features, including a random password generator. You can even attach files to passwords.

Image by adria.richards via Flickr

Keepass creates 'database' of passwords which are accessible by master passwords. That is you need to set a password to create and access a database. Once you are done, start creating new entries in the database, containing passwords and usernames.

Keepass can be extended — there is a number of plugins available for Keepass. Among these, my favourite is KeeForm which "is designed to open and scan a web site for input fields and fill them accordingly with a user name and password."

It is lightweight and comes in two variants — a full installer and a portable version. The portable version is needs no installation and can be carried in a USB drive. This is useful if you use multiple computers.

Mozilla Lets You Test Unreleased Features

2009-08-14T08:10:00.001+05:30

Mozilla Labs has released Test Pilot, a new program "aimed at collecting structured user feedback from Firefox and other Mozilla Labs experiments". This new platform lets you test features which are planned or will be available in the next release. They are offering a Firefox add-on which checks for features which are meant to be tested through this program and shows a ticker when a new feature is available.

Team Mozilla claimed that they made this new platform to reach more people. In a blog post, they said,

Mozilla takes user privacy very seriously. Being a test pilot means that you will be the one to test the product, and it is not you that will be tested. We are only interested in your feedback on the product features, not information about you. Depending on the particular test, the Test Pilot extension may automatically collect some data about the product being tested, but you have control of deciding whether to submit this data.

Currently, there's no feature to test-pilot. But a survey is going on.

How to Associate Different Filetypes for Syntax Highlighting in Eclipse

2009-08-13T11:55:00.001+05:30

Eclipse is a powerful development platform written in Java. It comes in various flavors — as a Java Development tool, as a PHP application development platform, among many other variants. Eclipse offers syntax highlighting for source code. But the problem crops up when you use a unconventional file-type for a specific source code. The default syntax highlighting fails.

Let me give you an example. The PHP syntax in .php files in Eclipse PDT are highlighted by default. But some PHP frameworks use .thtml (or .ctp/.inc) files as PHP files. If you open these files in Eclipse PDT, the syntax highlighting fails.

Here is a workaround:

Go to Windows » Preferences...
Go to General » Content Type » Text » PHP Content Type.
In the "File Associations" field, add a new file-association: *.ctp (or *.thtml, as your requirement.)
Restart Eclipse.

Tags: Eclipse, Tips, Syntax highlighting

Firefox 3.6a1 Shows up with Cool New Features

2009-08-11T21:13:00.002+05:30

Mozilla Firefox team has released version 3.6 alpha 1 of the browser. It has a new javascript engine (called TraceMonkey), along with two new CSS features. The Firefox team claims the alpha is 15% faster than the earlier release of Firefox 3.5.

Firefox 3.6a1 introduces CSS linear- and radial-gradient property. This new feature helps you create gradient only with CSS. But the syntax looks awfully horrible. Also new in Firefox 3.6a1 is the CSS background-size property, which allows developers to specify the size of the background images.

This release is a big improvement of the JavaScript engine. But it is still far from Google Chrome's V8 JavaScript engine. Chrome has recently come up with a new beta which is even faster. Firefox 3.6, codenamed "Namoroka", will be released in 2010. So, we can always expect more improvements.

7 Best Windows Desktop Search Utilities

2009-08-11T08:03:00.001+05:30

Although Windows has built-in search module, it sometimes behaves peculiarly — you are sure about a certain file and the default search shows no result. With Vista, Windows Search improved but it is painfully slow at times. Here are 7 freeware search applications that make searching files and folders easier — and they offer more options, too.

InSight Desktop Search

InSight search is more than a search utility — it can quick-launch upto "14 objects like weblinks, shortcuts to files/ folders, and short notes" and searches Wikipedia Articles. It shows you a list of possible results as you type. It offers previews of files from the search results. It can search for music files if you enter artist's name or album's name.

Snow Bird

Snow Bird is a lightweight Windows Search solution that needs no installation and can be carried along in a USB thumb-drive. Snow Bird has a built-in file-copy module that allows you to copy files faster ignoring errors while copying.

Locate32

Locate32 is another search utility. It creates index files containing information about all files and folders across drives. It can show search-results in thumbnails. You can even save search results into HTML files. Command-line users can search across drives with Locate32. Locate32 also offers an array of advanced settings.

Agent Ransack

Agent Ransack is the freeware and lightweight version of FileLocator Pro. Agent Ransack offers an advanced regular expression search, along with simple search options. Search results can be exported as text or CSV files. Agent Ransack also searches drives connected via network. It also offers command-line options.

Everything Search

Everything Search is a freeware search utility that is fast enought to show search results as you type. Its biggest drawback is that it searches only NTFS drives. (Read more about Everything Search.)

Windows Grep

Windows Grep is more for an advanced user than an average one. Windows Grep lets users search for files and folders based on a given regular expression. Along with regular search options, it features text-file searching (you can search program source code, batch files etc.), ZIP file searching (the contents of zip files can be searched). Since regular expressions are hard to build (for most of us), Windows Grep allows users to save searches for future purpose.

Search My Files

Search My Files is freeware utility that also searches for files and folders across drives but it offers a lot more options than any other utility. You can even search for files which are created on a certain date. It has a robust set of command-line options.

What's your choice?

How to Create Apple Leopard Text-effect with CSS

2009-08-09T14:06:00.004+05:30

Apple Leopard has a very attractive interface. Look closely and you'd find a slight shadow behind the texts on title-bar. This tutorial is aimed at mocking up that effect with CSS.
You may also like:

View Demo Download Source

What the Font

Apple uses Lucida Grande font (among other fonts) for texts in Leopard interface. This font is used in various weights. In case, you don't have it installed on your system, download and install it.

Create the Layout

First, we create a simple html document and put the following code in it.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>apple text effect</title>
<style type='text/css'>
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id='wrapper'>

</div>
</body>
</html>

This is pretty simple. In case, you are wondering why I put text-align:center for body and then text-align:left for #wrapper, you can find out why.

Now, within the <div id='wrapper'> we put the following code:

<h1 class="drop-shadow">
 <div class="text">Apple Leopard Text Effect</div>
 <div class="shadow">Apple Leopard Text Effect</div>
</h1>

Here, we created two divs inside <h1> and the two divs contain the same text. The class-names of the divs explains it all — the first div contains the text and the second div will work as the shadow.

The CSS

Now that we have created the skeleton, let's start adding style. Within the <style> tag we add the following lines of CSS.

h1 {
 font-family: "Lucida Grande";
 font-size:1.5em;
 color: #444444;
}

div.text {
 color: #444444;
 display:block;
 height:1px;
 max-height:1px;
 position:relative;
 z-index:5;
 text-transform: uppercase;
}

div.shadow {
 color: #f4f4f4;
 display:block;
 position:relative;
 text-transform: uppercase;
 z-index:1;
}

First, we have styled the <h1> tag with simple properties — a simple color, font-family set to Lucida Grande and increased font-size. Next, we styled two divs. The positions for both the divs are set to relative. This is important. Also notice that the z-index for the first div is higher than the second one. This is because we want the first div to appear over the second one.

Compromising for Internet Explorer

Unfortunately, it looks ugly on Internet Explorer. (I could not find any fix for it. If you have one, please share in the comments.) So, we use some javascript to show this effect only in Firefox.

First, we change the html a little bit. Instead of having two divs inside the <h1> tag, we let go of both of them. That is we should have,

<h1 class='drop-shadow'>Apple Leopard Text Effect</h1>

Now, we add jQuery to our html file.

<script type='text/javascript' src='jquery.js'></script>

Next, we add this javascript snippet within <head> tag.

<script type='text/javascript'>
$(function() {
 if($.browser.mozilla) {
  $("h1.drop-shadow").each(function(){
  var text = $(this).html();
  $(this).html("<div class='text'>"+text+"</div><div class='shadow'>"+text+"</div>");
  });
 }
});
</script>

The snippet first checks whether the browser is firefox or not. (Note that $.browser has been deprecated since jQuery 1.3. Here I am using an earlier version.) If the browser is Firefox, the snippet then parses each <h1> tag with class-name drop-shadow and replaces the text with two divs.

That's all!

Create Images from Torrents with Hid.im

2009-08-07T08:58:00.002+05:30

Hid.im is a web-application that lets you create images from .torrent files. It is an open-source project and the source code can be found in GitHub.
You can create images from torrents by uploading .torrent files to hid.im site. Hid.im also offers a Firefox add-on that lets you create images from torrents on the fly. You can decode images with a simple bookmarklet.
Hid.im is pretty useful. There are hundreds of sites that offer image hosting but fewer sites offer torrent hosting. With Hid.im you can easily share your torrent files through photo-hosting sites.

How to Create Images from Torrents In Windows

You can create images from torrent files in Windows without hid.im. Just put any image (in JPG format) and the torrent file in a folder, open command prompt, cd to that folder and enter the following:

copy /b image.jpg + torrent_file.torrent new_image.jpg

Now, just rename new_image.jpg to new_image.torrent and you have got it!