Company dedicated to web development, graphic design, photography and web hosting.

Blog

1. Use a javascript library:
   
   Is recommended to use a well known javascript library. The most used library on internet is now is JQuery, which is quite popular. In the Liferay 6 version is included Yahoo UI with a new AlloyUI library for visual purposes. YUI 3 is well known also, choose any of the most popular javascript libraries.
   
   
2. Use compressed version of javascript code:
   
   If possible use the minified version of your javascript files. Most of the main javascript libraries come with a minified version. If you want to compress your code you can use a tool as YUI Compressor.
   
   
3. Use of function names with a prefix:
   
   If you are creating functions in javascript in the main scope, be aware that your function have an unique name, for example, adding a prefix in the name of the function. Do like yourapp_getDetails() to be sure any other application is redefining your functions. In case you have many functions you can take another scheme: define an object and prototype it with functions.
   
   
4. Don’t include javascript code in the HTML code:
   
   If you need some javascript code in your html code, put all of them in an external javascript file and include it in your html code. In that way, the javascript file can be cached and will be easy to find functions in your code. Liferay include a barebone where the javascript files will be included and cached.
   
   
5. Avoid hardcoded urls in javascript:
   
   Any url must be in a file properties or in some reserved place where is easily configurable and maintenable. Avoid using hardcoded strings also if you are planning to develop a multilingual application.
   
   
6. Do not use javascript to display critical content:
   
   Avoid to use javascript for critical contents, because if the client doesn’t have javascript enable, it will limit the navigation. For example avoid using javascript in menus (disabling navigation), language preferences (not allowing to change the language), buttons (blocking to send some info), tabs (hidding some text), etc.
   
   

1. Avoid the use of general tags as body and others:
   
   If you are defining body style and others, all the styles in the page will change, also html contained in other portlets or even menus from liferay or alfresco. So avoid to use or redefine this general styles that will affect all the content in the html page, not only in your application. The DOM tree is shared and changes in styles will change all the elements in this tree.
   
   
2. Use shorthands css:
   
   If you are defining, for example, border for an element, don’t define each border as border-left, border-right and so, just define border: 1px 2px 3px 4px; making css file smaller and faster.
   
   
3. Prefix for a wrapper:
   
   If you are defining styles, you are trying to keep names as small as possible. It’s a good practice, but you can reach some conflicts. There are some options to avoid it. One of them could be defining a wrapper for all your styles. Create in HTML a div block with this main style, and after that, define all your css styles inside of this main style. Let’s say you define a main style as style1, you can create a wrapper for your html code as <div id="style1"> … </div> and define styles as #style1 #substyle1 or #style1 .substyle2
   
   
4. Don’t include css code in the html code:
   
   If you need to define some css styles, define all of them in one or more css files and add to the application files. Add them in your html code but never keep it in your html code.
   
   
5. Don’t define inline styles:
   
   Don’t use the property style in html tags, use instead the class property, using a style defined in some external css file. So, avoid <a style="...">, use instead <a class="...">
   
   
6. Use compressed version of css code:
   
   If possible use the minified version of your css files. If you want to compress your code you can use a tool as CSS Tidy, that can optimize and compress your css code.
   
   
7. CSS code must validate:
   
   Any css code must be valid css code. You can validate this code with some tools, for example, validator online in w3c.
   
   

1. Avoid the use of general tags as body and others:
   
   When you are developing aa application, the application container will generate all the headers, as <head> and <body>. You don’t need to define this tags again or the html code generated will not be valid.
   
   
2. Use divs instead table when possible:
   
   Is recommended to use div blocks instead table marks when possible. The main rule is common sense, but don’t forget that div blocks will allow layout flexibility.
   
   
3. Use UTF-8 as character set:
   
   If you are developing a multilingual application, you need to provide a html code with UTF-8 format. Define all the characters as html code and not as character, for example use &ntilde; instead of ñ.
   
   
4. Avoid url hardcoded:
   
   Any url must be in an external file where will be easier to modify. Also language strings must be in an external properties file.