Here is a very nice trick that you can use to make your own subdomains on… localhost. I know, it sound difficult as hell but, in fact, it’s easy as hell

In this mini-tutorial i assume that you use Xampp, but you can use with any other *AMP configuration, on any platform (Windows, Mac, Linux, whatever). Also, because i don’t own a static IP (my ISP is “kind” enough to change my IP every single time when i power up my PC), i use a dynamic DNS service. Ofcourse, you are not restrained to use this service, you can find plenty of similar sites, but i use this and i’m happy with it

Anyhow, let’s begin.

Step 1. Edit httpd.conf

If you use Xampp, and you installed with default settings, you will find httpd.conf in C:\xampp\apache\conf. On httpd.conf you need to find Include conf/extra/httpd-vhosts.conf. If this line have a “#” char, just remove.

Step 2. Edit conf/extra/httpd-vhosts.conf.

This is the fun part. Just add at the end of the file this lines:

<VirtualHost *:80>
	DocumentRoot G:/htdocs/mysubdomain
	ServerName mysubdomain.iamntz.selfip.com
</VirtualHost>

Then save and restart your apache server. Guess what? Now you have a subdomain!

Step 3. Assets folder

In a previous article i showed you how to put all libraries in same folder to avoid too many folder. Of course, this is fine when you don’t use subdomains. But what to do when you use? Well.. You edit httpd.conf !

First of all you need to be sure that Mod_alias.so is loaded. Find LoadModule alias_module modules/mod_alias.so and be sure it doesn’t have any “#” in front. Then add this at the end of the document:

AliasMatch ^/assets(.*) G:/htdocs/assets$1

Don’t forget to save and restart your server.

Next step is… There is no next step! You are ready to start/resume your regular work

Enjoy!

Actually… There is more than one

Keep only one copy of your favorite javascript library (and also up to date!)

I use jQuery a lot. No, actually i LOVE jQuery (is small, is fast, is easy to use, you know, usual craps that make you to love it; just like a woman ). To avoid duplicates of jquery, i use a folder called assets (but you can rename as you want as well). Here i keep latest version of jquery and jquery UI 1.5.2 (which now is the last stable version). With wget for windows in the assets folder, i wrote a small script to get latest version:

del jquery-latest.min.js
wget http://code.jquery.com/jquery-latest.min.js

Put this in a file called update.jquery.bat and double click it whenever you want to update your version of jquery (or any other library). This way you can keep all your sites up to date BE CAREFUL! Some plugins may WON’T work on newer versions of jquery!

Use snippets like a smart guy!

If you use E-texteditor (and if you don’t, then YOU SHOULD!), you probably know what snippets are. But, the question is: are you using them?

I put some snippets all together into an archive HERE. What you should do with this? Go to Start-> Run (or press WIN+R) and write this: %appdata%\e\Bundles then press enter. Extract the archive content right there and…. Done.

In each HTML document you can write ui then press tab. VOILA! A menu with jquery UI components are displayed and waiting for you to pick from there! Ofcourse, you MUST have UI files (minified) in /assets/ui folder (which must be in the root of your project folder). Again, be careful when you update UI. Even though UI 1.6 have same files as UI 1.5.2, there is (still) some issues with 1.6 (actually it’s a beta).

One of the most useful thing on forms is an “autoselect” function. How is this work? Let’s assume that you have a standard search box:

When textbox is focused you can do three things:

1. Do nothing. Let the user to delete all text. Not good for lazy people, right?
2. Autoclear box. But if user want only to change a letter (typo) or add another word, then he should re-type all things. Not good for usability.
3. Autoselect box content. Is just like the user double clicks on the text. How can you do this? Read further to see

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var initValue;
$(document).ready(function(){
$(':text').each(function(){
	$(this).focus(function(){
		initValue = $(this).attr('value');
		$(this).select();
	});
	$(this).blur(function(){
		if($(this).val() == ''){
			$(this).val(initValue);
		}
	});
});
});

What is the best thing with this? Well… If an user just leave the text box blank, that form is auto filled with previous value.

Pretty nice, huh? Well… I think is pretty useful too

Did you ever ask yourself how can you display a “loading” indicator when you make ajax calls using various libraries?

The simple but efficient answer is this:

1
2
3
4
5
6

$(document).ready(function(){
$('<div id="busy">Loading...</div>')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('body');
});

And that’s all. You need to do this only once.

Ofcourse, you can apply some CSS styles to #busy div, using an image generated with ajaxload or something similar.

I didn’t use any other libraries (actually i used prototype with scriptaculous sometime like AGES ago), but i think all cool libraries (like jQuery) have similar methods.

Another great news: with MORE than 50 fixes (but no new features tough) jQuery UI 1.5.1 is out.