Quick helper for web applications

Need a captcha ? – recaptcha or rpcaptcha
Need a Common JS loader ? ( Jquery, Mootools etc ) – JSLoader
Need permenant Jquery source ? – Jquery Path
Parse CSV ? – rpparse
Dynamic Image resize ? ( Thumbnail/any specified size ) – rpthumb

Improve page loading time

Now a days the speed of internet is growing like the price of gold in India. Up to 16Mbps is getting for homely use only. So a normal user expects the website he wish to browse to be loaded in less than 2 seconds. If takes more than 3 seconds he will saus “hmm”, then if we pass 5”seconds” then it will be “aarg” and beyond that “damn it, I don’t want to waste my time by browsing this dead slow website” at the end losses the visitor.

So to compete in this real internet world we have to give high quality products. Is that only ..? No we have the responsibility to save the time of the visitor. Understand the fact that every one is busy, so consider the tight schedule of the end user and give appropriate solution.

In this topic I am trying to cover some points which can improve the page loading time of a website.

The points mentioned below are a just a light in the darkness, you have to find your pin.

Below are some basic things you have to consider while developing HTML:

1. W3C validation
2. Try to load only one js file and one css file
3. Compress css and JS file
4. Try to avoid including of js files inside the body part
5. Avoid complex nesting of tables
6. Try to follow div layout ( avoid tables )
7. Reduce the size of html files ( the one which we will see in view source )
8. Use CSS sprites
9. Reduce the number of requests send to the server to load DOM items
10. Reduce image quality to a medium level, do not use HD videos or Multiple HQ images to load in same page

Things you have to consider while developing Server Side :

1. Try to reduce the number of database queries.
2. Analyse the flow of a particular page. Identify which data needed to be taken from the DB. Try for the possibility of writing a single join query to retrieve all the data. If it is no way possible then create multiple queries.
3. Optimize database
4. Increase the usage of SQL Views ( If a page with complex join query have frequent hits on it, convert it to view )
5. Try SQL Caching
6. Enable content caching through your server side script
7. If you have multiple unavoidable imaged needed to be loaded, use CDN ( content delivery network ).
8. Make sure you are DRY in code ( Do not Repeat Yourself )
9. Try to follow a templating system ( small application) or framework ( medium – large application)
10. Use Gzip Compression

Small trick and tip to do testing during development

Huh … the normal response from a web developer when they hear this term. Its very difficult game for web developer to give 100% bug free module all the time. There might be a chance that some times a small change style will be thrown back with bug. Then as a result frustrations, arguments, struggles late night working and bla bla.

I think at least 50% of the developers had been gone through this kind of experience, I am one of them.
Is there any way that we can at least reduce the number of bugs on each delivery ? This is what I would like to cover here.

For sure we have to accept the fact that “its our fault”.

So “prevention is better than cure “. Make sure you have covered all the areas where a threat can happen. List the areas you have covered when you deliver the finished module and give the prepared list along with this deliverable. That’s it chapter closed. Both side can agree what has been done and what has been checked.

Now, how we can make a list of what are things have to be checked. Its simple, I have some check-list that I am following during the development stage.

Pre-Dev listing
• Take a piece of paper, write down the key points of your requirement
• Draw a rough diagram of the functional flow
• identify the number of input(s)to be collected
• List the possible data that an interested user will enter
• List the possible data that a user might enter by mistake
Post Dev Testing
• Validate all the fields ( mandatory and others )
• Try the validations with JS turned on and off
• Check the application in all the browsers ( currently i will check in IE,FF, Chrome and Safari )
• Make sure the interface is matching with the actual layout
• Make sure you have covered the invalid/no out put regions with proper message ( for eg If no data available to display then show “Nothing to display” etc )
• Make sure data has been entered in to the database successfully
• Always try to cover internal error messages( syntax errors, warnings etc ) with custom error messages

Welcome more ideas 🙂

Usability of a website

I have get to know about the importance of this term just one year back. One of my colleague took a wonderful seminar on this topic, which led me to do more R&D on this.

As I am passionate towards internet I did my research of usability engineering for web applications. A short note on usability “Usability engineering is a field that is concerned generally with human-computer interaction and specifically with making human-computer interfaces that have high usability or user friendliness. read this article for more information.

Here are the questions that most widely used by a web developer while checking the usability of an application

• In a web application how we can make sure that our application is user friendly ?
• Do we have any standards or guide lines to check ?
• What should be checked to assure the usability of an application?

I have not heard about any specific standards created to measure usability of a website. To me it is all about common sense and effective thinking. The basic rule of thumb to measure the usability is “think from an end user perspective”. Being a developer I know this can not be possible always.

Here I will explain some of the tips and techniques I used to increase the usability of my website.

Surveys says that 90% of the internet users knows how a website works and how to use hot keys to navigate between contents. However when we develop a website we have to consider the remaining 10% also. The requirement or a feature that we get for an application can be seen in some other known web sites like ( facebook, twitter, orkut etc ). For the time being I believe that giants are proved their application’s usability thus they are getting more and more users. So coming back to the topic, when you receive a requirement:

• Identify whether it is available on any other website. Check how they implemented it?
• Use the flow, add your own improvement techniques
• Test the application ( make it bug free first and top most thing 🙂 )
• Give it to a normal internet browsing guy ( a non technical , regular internet user ) collect feed back from them

Other than the above mentioned items I used to check the following things too:

• Clear and straight navigation with proper breadcrumb support
• Meaningful icons and hovers
• Organized contents and title
• A font which can be read easily by the user
• An interface which will not give too much strain for the end user’s eyes ( color of text, background color etc )
• predictable flow of pages ( we have to develop the pages in such a way that the user can be able to predict what will come next )
• Reduce the number of clicks to see any particular information
• Faster page loading
• Minimal Input collection from the user
• The navigation area/block of contents should not change its position, it should constant for the entire website.

Please share more ideas, we can discuss it here further

PHP 4 and PHP 5

In most of the interviews I have been hearing the question “what is the difference between php 4 and 5”.  Several time I heard the answer “actually the main difference is OOPS” .  What does it mean …?  OOPS was not there in PHP4 ..?

Thus I had a research on the features of php4 and php5 and found some interesting things that can be pointed out for a typical comparison between PHP4 and PHP5

The Object Oriented Concept was already there in PHP4.  According to me  a PHP developer one should identify the difference between the two versions by checking the phpinfo file as a first step.  Then list all the things that was there in php4 and not in php5 and vice versa.

As a first step check the number of configuration items available in PHP4 and PHP5 the configuration values enormously increased in PHP5, i.e that much of new features and bug fixes.

As some quick note or as an important change we can pick default values of some configuration items

register_globals = Off in PHP5 and On in PHP4

magic_quotes_gpc = On in PHP5 and OFF in PHP4

safe_mode is deprecated in PHP5 and was there in PHP4

PHP5 includes a bundled library for Regular Expression

Advanced MySQLi support

Supports reverse  engineering feature called Reflections ( That I will go in detail in my next blog )

SimpleXML extension ( bye to the typical DOM access on XML files )  provides a very simple and easily usable toolset to convert XML to an object that can be processed with normal property selectors and array iterators

Now coming to the code level where the developer dig for something.

Lots of features have been introduced. specifying all of them is not necessary and not at all important.  Below I am mentioning some of the main features of PHP5 that we can use in code level.

magic functions ( __costructor, __set, __get, __toString etc ) google it for more details 🙂

supports access modifiers  ( private, public, protected )

more advanced exception handling

pretty much organized garbage collection ( this has to be implemented using our own logic ) to see more read this