portal development tips

I am currently involved in Portal development .

I wish to share my experience in Portal Development.

Now let us see the dont's  section first and do's  section  next.

Dont's:

 1. Never use different versions of JQuery Library Script. Stick to One version,since this may  cause compatibility problems when rendered in various browsers.

 Wrong Code:

<script src="js/jquery1.js" type="text/javascript"></script>

 <script src="js/jquery2.js" type="text/javascript"></script>

 2. Don't use inline style.Make everything in a single CSS file , minify it and use it.

 3. Dont use inline JavaScript functions.All your JavaScript routines must be with in 

<Script type="text/javascript">

</Script>

 4.Don't write code for HTML pages in a Text Editor.Better you can use

1.  GoogleDocs 

2. http://htmleditor.in/index.html

for designing HTML Pages

 5. Don't use IFRAMES in your HTML Page, since this may reduce the portability of the Portal.

6. Don't Mix HTTP and HTTPS content in the Page.

7. Don't initiate transaction (storing Client Values immediately into Database) immediately.Ask Confirmation from user and provide  User an opportunity to edit the values.Unless data from the Client is pending, don't send to Server.

Do'S:

1.Always be clear with list of browsers,which your portal needs to be supported.

2.Use FireBug for JavaScript debugging.This is an excellent tool and a firefox addon.

3.Always check whether JavaScript is enabled / disabled, when the page is being loaded.The following Code will do.

 <p>
<script type="text/javascript">
document.write('Javascript is enabled');
</script>
<noscript>
Javascript is disabled
</noscript>
</p>  

 If there is no JavaScript , don't load the page.

4.When ever you are required to display Images as thumbnail, Use a good image editor (GIMP) to re-size the image to the Small Size (125*125 , 125 *250 etc) .Dont try to load the big image in thumbnail.

5.Be clear about Minimum resolution of Monitor ,where your Portal is going to be viewed.

6.Check the Proper nesting of HTML tags.You can check the nesting using IDE such as NETBEANS.

7.In your Web Application arrange files as per their format.

1. All your JavaScript Files must be in a folder JS

2. All your CSS files must be in a folder CSS

3. All your Image files must be in a folder IMG

4. All the other content files like PDF,Doc must be under folder, resources

8. Use relative path when refering CSS/JS/Images.

9. Don't hardcode the Path when refering CSS/JS/Images.

10. Try to load all the contents/files from a single Server.Dont refer multiple Server,since this may increase the load time of a Page.

The Following practice is wrong

<script type="text/javascript" src="http://server.com/1.js">

</script>

Correct Practice:

<script type="text/javascript" src="js/1.js"></script>

11.When ever any contents are loaded in AJAX, use a AJAX Loader GIF Image.

12.When handling AJAX requests, check the HTTP Status Code of the request, before displaying in the View Page.The following link is for handling AJAX/HTTP - Status Code in Jquery 

http://api.jquery.com/jQuery.ajax/

13.When ever Image is displayed, give some content to alt attribute of Img Tag.This enable to show an alternate content, incase the image fails to load.

14.Its better use JPEG/PNG/GIF Images in the portal.Since they have less size when comparedto BMP Images.Dont use BMP format.

15.While designing User Registration forms,dont forget to use CAPTCHA.This will help the application to avoid brute-force attack to the Application.

 16.Validate Data at Client Side and Server Side as well.

17.If you have modified any content in your HTML page and need to check page rendering. clear the CACHE first. 

firefox / Chrome ->   CTRL+SHIFT+DEL

18. If you are using any Java Web Framework such as GRAILS, and if you are working on Plugins, check the Plugin support with Browser Version. 

Example : Ajax File Uploader plugin in GRAILS lacks Support to IE.

19.  If you are using any Java Web Framework such as GRAILS, handle  HTTP ERROR CODES such as 404,403,500 etc as HTML Pages