http://www.mysite.com/blog/index.php?category=news&year=2012&month=1

This is a rather simple request, but it is not very nice looking or easy on the eye, and it can be improved, for the user end experience.

Take this for instance:

http://www.mysite.com/blog/news/2012/1

That’s much nicer, and easier to read and understand even for a non technical person. They may understand the category, year and month without any input from you,

How do you convert your site? Well you don’t need to, but you can use a .htaccess mod_rewrite to change the url in the background.

RewriteRule blog/([a-z0-9]+)/([0-9]{4})/([0-9]) /blog/index.php?category=$1&year=$2&month=$3 [L]

This takes the first quantifier after blog (a-z0-9) and says any characters, put into $1. The second is a 4 digit number, and the third, any number.

The [L] tells the re-write engine that if this rule matches, don’t do any more rule processing (last one)

If you implement this way of displaying your links, then your site should be better off in the big wide world of search engines. A lot of search engine spiders ignore URL’s with & in them as it can cause recursive looping and its easier to just ignore them.

Also, if you come to rewrite your blog in a new language, ASP for instance (shudder at the thought) then you can change the rule simply:

RewriteRule blog/([a-z0-9]+)/([0-9]{4})/([0-9]) /blog/index.asp?category=$1&year=$2&month=$3 [L]

Thinking about your user experience, even if you are considering the search engines, is important.

If you want to read more about the Apache re-write module, you can go here

padding: 5px 10px 5px 10px;

in a CSS file. Do you ever wonder which of the properties are which?

Just start at the top and move clockwise until you reach the left side.

Top Right Bottom Left

It saves doing this:-

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Just a simple one that I’m sure 99.9% of people knew.

https://developer.mozilla.org/en/CSS/CSS_Reference

$('.btnName').live('click', function() {
    //do something
});

There is a nice little browser extension that will show all the elements on the page with a little bubble outlining the attached events/functions.

It is written by Allan Jardine, and you can get it from http://www.sprymedia.co.uk/article/Visual+Event

$('#link).click(function(){
    do some stuff
 });

But, what if that element doesn’t exist yet? Well, you can use the “live” handler:

$('#link').live('click', function(){
    do some stuff
 });

This will carry the event handler on and will match any future element that matches the selector.

More information can be found here: http://api.jquery.com/live/

Requirements : JQuery

var selectOptions = $("#selectId option");

Then, we just run the sort command on the options array – and this easily sorts the items.

selectOptions.sort(function(a, b) {
    if (a.text > b.text) {
        return 1;
    }
    else if (a.text < b.text) {
        return -1;
    }
    else {
        return 0
    }
});

Then, at the end empty the select object and re-append the sorted options array

$("#selectId").empty().append(selectOptions);

This sounds very familiar, right?

It was called the fish-bar, and even had a .com domain… www.fish-bar.com – at the time, there was a big thing about brand names, so I wanted a small name that people could remember and was loosely connected with friends, socialising, etc. So the ‘bar’ was put into the name… The fish was just a random word… It worked well.

Unfortunately, the code was very clunky, and there was very little modular activity on it, but it worked, and for all its fault, security issues, etc, it was a working site and I had member (albeit only a dozen or so!)

The fish-bar used a dirty Microsoft Access database, and was built in Microsoft Active Server pages. I said before that it was clunky, and it was. It used very basic javascript, and there was absolutely no tests for SQL injections, or scripting hacks… But, members could sign up for free…

It went live in 2001 – and you can sort of see an archive of it at the way-back machine… (http://web.archive.org/web/*/http://www.fish-bar.com) – but it died a death in 2002 – but I can’t remember why. Perhaps I didn’t feel like renewing the domain name… Not sure…

It just goes to show, that anyone could’ve written a website that millions of people use, every day and get bought out by a major player with a team of developers and proper coding standards. If I’d kept up the coding and maintenance of the site it might have gone somewhere, or got me noticed by head hunters, or anything else.

We read stories of students selling their sites for millions of pounds, but I was not one of them.

I do still have some of the code that one of the guys at the wayback archive managed to send me, and I’ve uploaded it here, incase anyone wants to have a look and a laugh at how old and outdated it was. You can find the code here

<input id="one" tabindex="3" />

<input id="two" tabindex="1" />

<input id="three" tabindex="2" />

<input id="four" tabindex="4" />

Here, once the page is loaded, the first TAB press will set focus to input two, and then subsequent presses will move the focus to three, one and then four – before returning to two.

In a static web page it can be useful, but in a dynamic page, then this is a truely awful way of moving around.Especially as a web browser will automatically give the controls their own order, naturally in the order that they appear in the HTML source.

So why use it? I have no idea. I have never needed this attribute, and cannot ever see me ever using it.

I’ve just had to remove all the wonky tabindex’s from a huge page. Luckily I use an IDE that lets me search and replace using regular expressions! Online Regular Expression Testing Tool