Ahmed Hashim's Blog

March 2007 Archives

Tips to save client's bandwidth

http://egjug.org/hashimblog/2007/03/20/tips-to-save-clients-bandwidth/

In this post, I will write about the client/server bandwidth saving. In some countries, the cost of the Internet is based on the bandwidth consumption, you pay for the number of MB's you have used as traffic, so, if there is a website which contains pages with large size, you will consume the client bandwidth! Also the request will take long time because of the large size of the page. People always talking about saving server bandwidth which is good, but it is important too to save the client's bandwidth.
How can I save the client's bandwidth?

1. Don't use images instead of text. Write the text and use CSS and javascript to add styles and effects for the text. For example, if you want to make a link to your homepage, some people use graphics package to write the word 'Home' and add effects, background color, borders..etc. All this staff can be done by CSS and JavaScript with a great feature "you can change the text without need to use any graphics package". So, it is very important point to replace images with text as much as possible.


2. Don't use background image if it is blank, else use CSS background color.


3. Don't use a big image as background, try to make a small on and repeat is using CSS.


4. Don't write HTML comments in your code, instead, write server side comments in JSP, PHP ...etc code.
   
HTML comments <!-- comments -->
JSP comments <%--comments --%>
<?php
//comments
?>



5. Don't copy-past from any word processor. The word processor like Microsoft Word add extra not-standard code, check this bulk of code
   
<p class="MsoNormal" dir="ltr" style="text-align: left; unicode-bidi: embed"><span style="font-size: 10pt; color: black">Test
the Microsoft Words HTML code!</span><span dir="rtl" lang="AR-SA"><o:p></o:p></span>I want just to write a statement "Test the Microsoft Words HTML code!" without any styles but the word add intelligent code :)


6. Don't make inline CSS, move it to a file. Don't repeat the styles and reuse those in the common CSS. For example, you will repeat the same style for every item in a list like that
   
<ul>
<li style="color:#fffaaa;font-size:20;">1</li>
<li style="color:#fffaaa;font-size:20;">2</li>
<li style="color:#fffaaa;font-size:20;">3</li>
<li style="color:#fffaaa;font-size:20;">4</li>
</ul>
While you can make
   
.listItemStyle
{
color:#fffaaa;
font-size:20;
}
   and the list will be
   
<ul>
<li class="listItemStyle">1</li>
<li class="listItemStyle">2</li>
<li class="listItemStyle">3</li>
<li class="listItemStyle">4</li>
</ul>

   This will keep your code clean and easy to use. The code will be reusable and easy to maintain.


7. Don't make inline Javascript, move it to a file. This will promote reusability and maintainability.


8. Use client side validatoin with JavaScript before submitting the data to the server. So, if there is an error in the data, you will not submit and back again.


9. Use AJAX to send partial requests to the server. For example, if you have 2 dropdown, one for the country and another for the city and want to load the cities of the countries choose by the user, no need to submit the complete form, just send request with the country and use the returned data from the server to update the DOM of the page.


10. Use JavaScript and CSS compressor to compress the javascript and css files, it will be sent to the client, so try to minimize the size as much as possible.
    The CSS compressor can reduce the size of the CSS files. You can use the DOJO compressor or any other javascript compressor.


11. Use valid XHTML code to make sure that your code is correct.



12. Use compression in the webserver/application server used in your application, this will compress the request/response and will save both client and servers's bandwidth. This may have a performance impact. An example for tomcat configuration:
    
<Connector port="8080" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true"
compression="no"
/>

    You will need to add to this four attributes:
    compression="force"
    compressionMinSize="2048"
    noCompressionUserAgents="gozilla, traviata"
    compressableMimeType="text/html,text/xml"
    Notice that there is a list of compressible MIME types. Basically:
    * compression="no" means nothing gets compressed.
    * compression="yes" means only the compressible MIME types get compressed.
    * compression="force" means everything gets compressed (assuming the client accepts gzip and the response is bigger than compressionMinSize)You can test your application compression http://www.port80software.com/products/httpzip/compresscheck


13. Use the ZipOutputStream as a resonse output stream if you will return to the user a big plain text file. This will compress the file on the server and send it, the client's browser will extract it.
    
String encoding = request.getHeader("Accept-Encoding");
OutputStream out = null;
if (encoding != null && encoding.indexOf("gzip") != -1) {
response.setHeader("Content-Encoding", "gzip");
out = new GZIPOutputStream(response.getOutputStream());
}
else if (encoding != null && encoding.indexOf("compress") != -1) {
response.setHeader("Content-Encoding", "compress");
out = new ZipOutputStream(response.getOutputStream());
}
else if (encoding != null && encoding.indexOf("deflate") != -1) {
response.setHeader("Content-Encoding", "deflate");
out = new DeflaterOutputStream(response.getOutputStream(), new Deflater(
Deflater.BEST_COMPRESSION, false));
}
else {
out = response.getOutputStream();
}
out.write(".....");



14. Optimize your resources (images, flash).


15. 
    Another great tip from the comments below, use the Cache-control headers to cache the static resources on the client side for a specific duration. A perfect example is there
    OnJava.

References:

http://egjug.org/hashimblog/2007/01/03/dwr-hello-world/

Hi, After making few samples with DWR framework, I think it is a very good, powerful and easy to use AJAX framework. I am using it mainly to perform File Upload with progress bar, taking into consideration to be working in all browsers like IE5.5, Netscape, Firefox, Mozilla, Opera, Safari and other browsers in MAC and Linux.

1- Whats is DWR? DWR (Direct Web Remoting) is a Java/JavaScript OpenSource library which allow you to write AJAX enable application with Java without the need to use XMLHTTPRequest and other low-level javascript staff.

2- Why DWR is different? You can invoke Java Bean's method directly from within JavaScript block! No XMLHTTPRequest, No Servlet, You can Recerse AJAX!!! which means calling JavaScript Methods from Java Code!

3- How DWR will handle this staff? The DWR library will create a servlet for you to handle this staff, but you will have to declare your Java classes in dwr.xml file.

4- How to?

• Get DWR jar file


• Create Java Class

• Create dwr.xml file and add definition to this class

• Configure web.xml to add DWRServlet

• Create JSP page with HTML controls

• Write the JavaScript part

• Testing DWR, you can deploy your application at any servlet container and run the JSP page http://localhost:8080/DWRHelloWorld/jsp/helloWorld.jsp you should

The attached war file include the demo source code and can be deployed in any servlet container. I hope that you can see this post useful and would like to continue in DWR posts.

Load Message Resources from Struts Action

Sometime, you will need to read some text from the resource files in your application from the Struts Action class. The easier way which most developers are using is to open the resource file using the java.util.ResourceBundle class, which will open the file and read its content.

PropertyResourceBundle properties=(PropertyResourceBundle)ResourceBundle.getBundle(propertyFileName);

Struts provide a methods in the Action class to get the locale and the resources

getLocale(request) and getResources(request)

For some reason, getResources() didn’t work with me.

I didn’t think about the first solution because I am sure that the resources are loaded in the application and must be stored somewhere, so, lets use. And here is the code

MessageResources resources = (MessageResources) getServlet().getServletContext().getAttribute(bundle);

message = resources.getMessage(locale, key);

Mirror:

http://egjug.org/hashimblog/2007/03/07/load-message-resources-from-struts-action/

Compare String to a literal.. coding style

I saw many times code written by geeks, comparing String to literals in this style

public boolean compareUser(String name)
{
if("Ahmed Hashim".equals(name))
{
//do staff here
return true;
}
return false;
}

public boolean compareUser(String name)
{
if(name.equals("Ahmed Hashim"))
{
//do staff here
return true;
}
return false;
}

compareUser(null);

I think you got it, passing null will not need check in the first version because you are not accessing the “.equals” method inside the passed object, while the 2nd version will cause NullPointerException!

Mirror:
http://egjug.org/hashimblog/2007/03/08/compare-string-to-a-literal-coding-style/

This work is licensed under a Creative Commons License.