Good practice

There is a lot said about good practice when programming and there are a few things i use.

- Produce reusable code

Even if you are sure the code you write is never going to used on another site write it as it will be used for other sites. Reusable code is a lot cleaner and more flexible than improv code. This makes your site faster.

- Only the code that displays html must maintain html.

Get as much html out off php classes and javascript functions. If there is no way to remove the html out of the code keep it as simple as possible. If a css class is needed or another attribute make it an argument so it can be adjusted without crawling through the function code.

- Javascript interfaces need server language script

When you are coding in javascript sometimes you can forget it can be turned off. You can make nice things but when users can't do anything on your site without javascript you never reach all the people that want to use your site. If there is html that has no purpose without javascript it's site fat.

- Use html wisely

Because div and span tags are the most generic tags you can use them to replace all tags. Use html tags according to their purpose. You can bend their purpose a bit like using a list to build a menu that looks like a table. Use an id attribute only once per page.

- Make css readable and cascading

When you create css based on html you are going to get into trouble sooner or later. If you put everything in a class or an id your css file is going to be lengthy and you are going to have to use multiple classes if you want to add javascript functionality to an element. Use an id to style included elements. Split your css file into sections using comment lines.

These are a few tips. I hope they work out for you too.

From server to client

I think most people who are used to program with server languages like php and perl have trouble ajusting to javascript as a partner language instead of a supporting language.

To give an example. I've worked on Smooth paginator. The idea behind it is simple. Group pages together by sets to minimize the place taken by the page links. Although it's nice work the one thing that's bothering me is the fact that the sub-group is generated by the php code therefore it is shown when javascript is turned off, The subgroup has no use then. The subgroups need to be generated by javascript to degradate gracefull.

If you plan to migrate from a server script to a more client script approach you have to keep in mind javascript can be turned off or not read by the browser. Try to back-up as much client functionality with server functionality. The way i do it is by creating everything in a server script language and then i'm creating the client script whitch uses methods from the server script through ajax calls. This way you don't have to program the same funtionality twice and you have the new way of handling user actions.
If it's difficult to mimic the javascript behaviour make sure the functionality is not essential for the use of the application.

I've adjusted the smooth paginators code to generate the sub-groups but it has to be approved by the creator of the code. But i'll think he isn't going to be difficult about it because he switched from version .02 to .03 using my rough javascript code. That's surely nothing to be proud of, the improved code is.

Blogger navbar

The blogger branded bar hides itself as soon as the mouse moves in an area outside of the bar. This are four lines of jQuery code.

$(document).mousemove( function(e) {
ym = (e.y || e.clientY);
if(ym < 32){ $("#b-navbar").attr("class","show"); }else{ $("#b-navbar").attr("class","hide"); }
});

First we add the mousemove event to the document so that it can monitor the cursor. Than we define the place of the cursor in relation with the top of the visible website.
The bar is 32 (firefox)/ 34 (IE) pixels so i took the lowest number. If the mouse is below that height the class show will be added to the bar whitch the blogger people gave the id b-navbar. If the mouse is above that height the class show will be added.

My first impulse was to use the hide and show functions of jquery but they didn't respond so i made a hide and show css class where i change the visibility.

You could put the search box on your page so it stays accessable all of the time by putting the form code somewhere into your template.

<form id="b-search" name="b-search" action="http://search.blogger.com/"><input type="text" id="b-query" name="as_q" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="ui" value="blg" />
<input type="hidden" name="bl_url" value="xwerocode.blogspot.com" />
<input type="image" src="http://www.blogger.com/img/navbar/2/btn_search_this.gif" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='xwerocode.blogspot.com'" />
<input type="image" src="http://www.blogger.com/img/navbar/2/btn_search_all.gif" alt="Search All Blogs" value="Search" id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" />
</form>

I skimmed the divs and other things that where in the original form to make the form more readable. Ofcourse you have to change xwerocode.blogspot.com to your url or you could search my blog on yours.
If you want to change the color of the form just use the style attribute in the form tag.
You can change the type of the button from image to button to have more lay-out options but don't forget to add a value to the "search this blog" button.

Changing the form content after submiting

Changing the page content after submiting is a common practice. Many programmers redirect to a new page. If you want to do an ajaw, the w is for whatever, call you have to stay on the same page but that possible with a server script language too. I'm using php most of the time. so here is the php code for it.

<?php
$good = 0;
if($_POST['send']){
// handle submit
$good = 1;
}
?>
<html>
<head>
<title>example form</title>
</head>
<body>
<?php if($good == 1){ ?>
<p>Your form was submitted</p>
<?php }else{ ?>
<form action="" method="post" id="form">
<input type="text" name="text" id="text"><br>
<input type="submit" name="send" value="Send" id="send">
</form>
<?php } ?>
</body>
</html>

This form can be ajawed easy with jQuery backed up with your original php code. Maybe you already noticed the id attributes of the form tags. That are the action trigger (send), the input value (text) and the placeholder (form).
The javascript that would be added is

$(document).ready(function(){
$("#send").click(function(){
$.post("process.php",{text: $("#text").val()},function(html){ $("#form").html(html); });
return false;
});
});

That's all. The click function catches the clicking of the button. Return false is added to stop the normal behaviour of the button.
The post function has three arguments; file, parameters and callback. The argument of the callback function can have any name you want and it gives back the output of the file. The file can output anything you want- html, xml, json - but html is the most easy option. The content inside the form tags is changed to the output of the file with the html function.

You can put your form handle code in a class method that you then call in the process.php as on the actual page to make your code less fault-prone. And it's best to add an action to the form tag.

Announcement

I going to continue to write the blog in English so the content is understandable for all readers. When you want to program the best documentation is written in English. Maybe i'm going to maintain a parallel Dutch blog but only if there are enough requests.