I Can’t Search For Past Timeline Posts On Facebook. What?


If you think you can do “all” sorta things on Facebook, think again!

Can you do this? . . . Search your past posts on your timeline on Facebook?

Well, looks like for Facebook guys its a hell lot more work than the Privacy-Killer Graph Search.

I think its all bout priorities vs creating hype.

I think its about what you WANT vs what your users NEED.

Image 

 

 

A Case of Bad User Experience


Last week I have been working on a couple of projects. I use Windows, unfortunately on my company-provided Dell INSPIRON. Apparently I haven’t changed anything to the system in terms of (un)installing applications except I was just preparing a keyboard layout for a friend. After getting done with the thing , I wanted to try it out on my system but soon I found out that I have the same keyboard already installed. Which I went on to uninstall and rebooting my system. As I logged in, this dialog popped up and stayed for a while, while I wondered what on earth this thing doing to my system!!

 

Bad UX

 

The title-bar says “Launching Application”. Come on! you don’t want me to guess what application. We are not playing some kind of guess game here! Its my PC man!

You PC starts and you see some crazy thing like this, definitely you’re going to react.

This is Windows. Its not 3.1 or 95 or Millennium or 98 or even XP, its The Microsoft Windows 7!

Whatever it was it was some .Net app. Now I’m not sure whether it was caused by my keyboard layout or something else, but this is the worst user experience.

The dialog has conversation but its talking something which user fails to understand. Its not clear which application is being referred to, and the dialog disappears on its on not giving me any information what happened afterwards, Whether the app failed or was successfully installed. In any case the user was kept in darkness.

For me I’ll dig it up, I have to look it up in the event viewer, but what about the average user?

Will they have to live with that clumsy dialog box who is master of its will.

Thanks for reading

 

 

Dynamically Add, Remove and Re-number Tabs in Twitter Bootstrap


NEWS: Bootstrap 3 is out! Currently a RC1

Earlier today, I was working on a web app with Twitter Bootstrap and I was required to have tabs which the user can add or remove. Unfortunately Bootstrap doesn’t give you the close button on a tab out-of-the-box. So I quickly went to the Bootstrap’s Issues page on GitHub where I stumbled upon the very problem I was facing.

A guy, one of the maintainers of the project was of the opinion:

I don’t think we’ll be adding this as native functionality, but feel free to file an issue later if you wish to add whatever solution you come up with to the wiki for forks/extensions/etc.

I was like wow! Now, everyone was proposing their way of doing it. So, I came up with my solution thanks to this guy who proposed this solution. He just gave an heads-up and that was all I needed, then I sat and wrote the three features I needed i.e. Add, Remove and renumber the tabs (if in case one is removed from the middle. and yeah, the first tab cannot be removed).

The Code

The following code assumes Bootstrap and jQuery scripts and style are loaded accordingly and the code is called on

$(doument).ready()

and

var pageNum = 1;

is defined in the global scope (I know I know :)).

/**
* Add a Tab
*/
$('#btnAddPage').click(function() {
    pageNum++;
    $('#pageTab').append(
        $('</pre>
<ul>
	<li><a href="#page' + pageNum + '">' +
	'Page ' + pageNum +
	'<button class="close" title="Remove this page" type="button">×</button>' +
	'</a></li>
</ul>
<pre>

'));

    $('#pageTabContent').append(
        $('</pre>
<div class="tab-pane" id="page' + pageNum +         '">Content page' + pageNum + '</div>
<pre>
'));

    $('#page' + pageNum).tab('show');
});

/**
* Remove a Tab
*/
$('#pageTab').on('click', ' li a .close', function() {
    var tabId = $(this).parents('li').children('a').attr('href');
    $(this).parents('li').remove('li');
    $(tabId).remove();
    reNumberPages();
    $('#pageTab a:first').tab('show');
});

/**
 * Click Tab to show its contents
 */
$("#pageTab").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
});

/**
* Reset numbering on tab buttons
*/
function reNumberPages() {
    pageNum = 1;
    var tabCount = $('#pageTab > li').length;
    $('#pageTab > li').each(function() {
        var pageId = $(this).children('a').attr('href');
        if (pageId == "#page1") {
            return true;
        }
        pageNum++;
        $(this).children('a').html('Page ' + pageNum +
            '<button class="close" title="Remove this page" type="button">×</button>');
    });
}

The Demo

Check out the demo here.

 

Please like and share the post if you enjoyed it and if it helped you.

WordPress Code Generators


Hi,

Let me quickly share with you some useful code generators specifically for WordPress. If you are into developing or customizing wordpress themes and plugins, these tools come in really handy.

GenerateWP (This one’s my fav so far)

Themergency

WordPress Theme Generator by yvoschaap.com

If you know other than the ones I menetioned would be great!!

Thabks for reading,

Vimeo: How to search videos like a ninja?


Vimeo has a rich database of many amazing videos contributed by millions of users and producers.

The plus point (out of many): its ad-free.

The point that freaks me out: search.

Believe it or not Vimeo has no idea what a user is looking for, making you believe that the content you are looking for doesn’t exists on Vimeo.

Image

Before you dump Vimeo of for good, let me share a little secret with you and you will be searching Vimeo like a ninja.

I’m sure Goolge is your best friend (if not,its time to do so).

So, without further delay here’s the secret:

All you have to do is:

  • goto Google
  • type `vimeo` and the video title you are looking for on Vimeo

e.g: `vimeo be here now ray lamontagne`

Image

Thanks for reading.

Turning Goolge Instant Search suggestions off


According to Google

Google Instant can save 2-5 seconds per search

But for me 2 or 5 second should not be a big deal at all. As I have a slow connection most of the time therefore the “Instant” predictions stays disappeared for longer than 5 seconds and that becomes annoying for the curious searchers. Then I’d be like “get me out of here!” after refreshing the page numerous times.

So, how can you turn that thing off?

Well, that’s pretty easy just head to your Google Search Settings and click on “Never show Instant results” under Google Instant predictions

jQuery – Prevent Multiple AJAX Requests


Many times we do not want to take any other requests of the same type while one is still in progress.
A normal post request looks something like:

function doSignup(){
    $.post('http://my-awsomesite/ajax.php',  $('#signupForm').serialize(),
    function(resp){
        if(resp.status == 'OK'){
            alert("Success message");
        }else{
            alert("duh! Signup failed");
        }
    }, 'JSON');
}

Suppose, if we call the function using a link,

<a href="javascript:doSignup()">Signup</a>

Someone does repeated clicks and an enormous amount of requests will be off their way to choke the server to death!
So, to process one request at a time, we’ll modify the above function to something like this:

/**
 *Let's define a variable that acts similar to the 'On Air' light. When
 *its active (true in this case), we will just return from the doSignup function
 * silently or inform the user via a jquery-ui dialog or something like that.
 */
var isProcessing = false;

function doSignup(){
    if(isProcessing){
        /*
         *This won't go past this condition while
         *isProcessing is true.
         *You could even display a message.
         **/
        return;
    }

    /**
     *set isProcessing to true right before the $.post (or anyother method
     *of the sort like $.ajax, $.get) is called
     */
    isProcessing = true;
    $.post('http://awsomesite/ajax.php',  $('#signupForm').serialize(),
        function(resp){
            isProcessing = false;
            if(resp.status == 'OK'){
                alert("Success message");
            }else{
                alert("duh! Signup failed");

            }
        }, 'JSON');
}

The code is pretty straight-forward, you define a variable that is visible to your function.
Then inside your function you write a conditional statement to check whether the variable is true, initially it is false.
If it’s false then the code continues and just before the AJAX action (get, post, etc) is performed, you’ll change the variable to true. And as soon as the AJAX action completes its trip to the server, you turn that variable to false again.
While the AJAX action is processing if the user tries to click the signup link, either you prompt him/her to wait or simply ignore his actions.

As I mentioned earlier of repeated user clicks, another concern arises, we have to tackle after how much delay a request should go in order to prevent unnecessary requests to the server. I’ll try to cover that in a future post.

Thanks for reading, have a great weekend.

Troubleshooting the PATH Environment Variables in Windows


Have you been freaking out whole day about why the heck the command prompt keeps throwing an error instead of just executing it, saying that

‘foo’ is not recognized as an internal or external command,
operable program or batch file.

and you can clearly see that c:\foo is in the PATH of the Environment Variables.

When I tell you that you have an extra space just after the ; then you’d be like “hey! that was pretty easy man!”.

In case you are still in a limbo, let me tell it the ol’fasioned way.

Remove any spaces after of before the semicolon that separates paths in the PATH variable otherwise system cannot find the program you want to run from the command prompt.

The program foo won’t work:

PATH=c:\windows\system32; c:\foo;c:\bar\bin
PATH=c:\windows\system32;c:\foo ;c:\bar\bin

I hope that helps someone out there.

Customized jQuery UI Autocomplete Widget: List Items with description


jQuery has made DOM parsing & manipulation easy for every developer out there.

jQuery has provided a range of rich set of UI controls. My focus will be on how to customize the jQuery UI Autocomplete (version 1.8.15) widget item list according to our needs. Our requirement for the customized item list were:

Each Drop-down item should have a description beneath it.
Item should appear in bold face & its description should be small.

By default, the jQuery UI Autocomplete appears like this:

Figure1: Default appearance of the Autocomplete widget.

and we want to transform it to this:

Figure2: Customized Autocomplete widget with item list visible.

The demo accompanied with the jQuery UI download uses the code below to display results in Figure1:

$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});

The id “tags” is attached to the input tag.

This code is pretty simple & self explanatory. Isn’t it?

Coming back to our requirements, we have to display a description for each item.

For this, there may be many more better ways to do it but I opted to add a separator to each item and then split()‘ed the item text from the separator if it had parentheses. Then, I wrapped each of two items in tags (you can use div if you like) so that I can change their style accordingly.

The separator can be any punctuation mark, say an hyphen (-), a pipe (|) etc. I went with the small opening parenthesis ‘(‘ because the list I received has already its description part inside these parentheses.

Customizing the Autocomplete Plug-in (Not Really):

Now, this is what I call the meat of this post.

Note: Instead of modifying the original source, its always a better idea to copy that part from the original source to a new place and do required changes.

jQuery has built into it, a low-level function called .data() which stores key-value-pair (KVP) data and associates it with a given element. The element and a key is passed to the .data() to retrieve the value stored with that key within the given element. check out official jQuery API documentation about .data() for a detailed explanation with code examples.

When we type in to the Autocomplete widget’s textbox, a dozen of private & public functions/events are called to search, filter, render and finally, display the list on the screen. Of all those functions, _renderItem() function and the select()  event are of interest because these are the places where we can override stuff.

You should already know that the  _ (underscore) prefix to a function tells that the function is private.

The original code looks like this:

/*
* jquery.ui.autocomplete.js
* Line Number: 449
*
*/
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" ).text( item.label ) )
.appendTo( ul );
}

Check out Git Hub source.

Lets now customize or should I better say override the _renderItem() function:


	_renderItem = function(ul, item) {
			itemTitleDesc = split(item.value);
			var desc = "";
			if (is_array(itemTitleDesc)) {
				itemTitle = itemTitleDesc[0];
				if (itemTitleDesc.length > 1) {
					itemDesc = itemTitleDesc[1];
					itemDesc = itemDesc.replace(")", "");
					desc = '<br/><span><small>' + itemDesc + '</small></span>';
				}
				var itemContent = '<span><strong>' + itemTitle
						+ '</strong></span>' + desc;
				return $("<li></li>").data("item.autocomplete", item).append(
						$("<a></a>").html(itemContent)).appendTo(ul);
			} else {
				return $("<li></li>").data("item.autocomplete", item).append(
						$("<a></a>").html(item.label)).appendTo(ul);
			}
		};

Let me now explain the code to understand better what is happening. I won’t be getting into deeper details though.

For our case, whenever the function receives an item, it has a value of the form [tile] ( [description] ), therefore, we always want to break that into two parts from the first opening round bracket (parenthesis) and then get rid of the closing bracket. Obviously, the first & the second part of the string will serve as the title and description, for the items in the list. Then wrap each of them into their own span or div. All of this stuff is stored in the itemContent variable.

So, that was for the items in the list, now if we type in the text box, we get the nice list of items with their descriptions but we are not done yet because as soon as we select an item from the list, the text box would just be filled with the whole string including the parentheses because we haven’t told jQuery to what to do when a user ‘select’s an item.

We get the "raw" text because we haven't done anything on the select event.


select : function(event, ui) {
itemTitleDesc = split(ui.item.value);
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
}
ui.item.value = itemTitle;
}
}

Now, lets just put everything together:


$("#tags").autocomplete({
source : availableTags,
select : function(event, ui) {
itemTitleDesc = split(ui.item.value);
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
}
ui.item.value = itemTitle;
}
}
}).data("autocomplete")._renderItem = function(ul, item) {
itemTitleDesc = split(item.value);
var desc = "";
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
desc = '<br/><span><small>' + itemDesc + '</small></span>';
}
var itemContent = '<span><strong>' + itemTitle
+ '</strong></span>' + desc;
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(itemContent))
.appendTo(ul);
} else {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
}
};
});

Here are the two utility functions which I used to check for array and the other that splits the string.


/*
*Google gave me this. How lazy I am ;)
*/
function is_array(input) {
$ret = typeof (input) == 'object' && (input instanceof Array);
return $ret;
}

function split(val) {
    return val.split("(");
};

I hope this article serves its purpose.

Please do give your feedback.

Regads.