Archive for category Javascript

Compressing Web Site Contents, Scripts and Stylesheets

Today I wonder how I could minify my javascript files and do a server side compression to minimize the cost of loading web site requred javasript and stylesheet files. Where to begin… I’ll start from Apache Server configuration information for server side compression and finish with YUI Compressor that helps you to minify your script files as you should have seen those files ending with “your_script_file.min.js”. If you are using Apache Server, you might have Deflate Module installed with your Apache installation. What you need to load this module while your your server starts is to configure your apache configuration file.

LoadModule deflate_module modules/mod_deflate.so

And if you have access to the httpd.conf then you can add following lines to it.

<Location />
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/x-js text/css
</Location>

If not; you should specify the initialization line into your htaccess file.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/javascript text/xml application/xhtml+xml application/x-httpd-php
</IfModule>

You might have problems to compress javascript files which has different mime types. Then, you can use followig configuration.

AddOutputFilterByType DEFLATE application/x-javascript

That will do. Now, I will introduce YUI Compressor. YUI Compressor is one of Yahoo developer team product that you can download from here. If you have dowloaded the YUI Compressor built from the site that I shared above, what you should do to compress your file is:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

Where, x, y and z are the version number of the YUI Compressor download. Also you can find more information about YUI Compressor at http://developer.yahoo.com/yui/compressor/#work

Thank you for reading, I hope this will help some of you guys.

No Comments

Ext JS Templates – The Complete Tutorial

Today I’ve searched all over the web sites to find some basic Ext JS template definitions and could not find a good resource as I needed. So, I decided to bring out one myself. Hope you will enjoy.

Basics

Ext JS templates have their own parsing algorithms that needs to be compiled before used and here is a quick start to it.

Defining Variables

If you would like to add variables on the template you need to surround the variable name with curly parentheses (‘{‘ and ‘}’ ).

Example:

{variable_name}

Using Variables in Texts

To add variables into the predefined texts you can just add the variable with curly parentheses where you want to put the variable.

Example:

This page has {page_picture_count} pictures.

Using HTML Tags on Templates

It is the same way you add html tags on your Ex JS template as adding predefined text.

Example:

<a id="{id}" href="{url}">{text}</a>

Conditions

You can set conditions to perform on template rendering to the parameter as well. How you do this is pretty simple.

Form:

<tpl if="your condition">{field}</tpl>

Example 1 (If condition):

<tpl if="{field}=='Good Example'">{field}</tpl>

With this template what ever else the field variable is will not be evaluated except if it is equal to ‘Good Example’ string.

Loops

You can use loops when you need to output a list of variables.

Example:

<tpl for="{parent}">{child}, </tpl>

With this template for each child in parent will be separated with columns.

Example 2 (If and Else If condition):

<tpl if="{field}=='Good Example'">{field}</tpl>
<tpl if="{field}=='Else Example'">{field}</tpl>

With this template what ever else the field variable is will not be evaluated except if it is equal to ‘Good Example’ or ‘Else Example’ string.

Using Predefined Functions on Templates

Ext JS has internal Template functions that are useful for your templates.

Suppose we want to output a variable named content but we are afraid that it may take too much space. A useful feature would be able to truncate this content to 50 characters and show the user a link to view all of the content. We can use the formatting function “ellipsis” to truncate the content to only 50 characters. This function will also append “…” to indicate to our users that there is actually more content but it has been truncated.

Example:

<div>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></div>

Here is a list of the formatting functions which you can use with Templates:

ellipsis(length): Abbreviate your variable to a specified length and append “…”. Useful for when you want to only show the first x characters and then provide a more detailed view.

undef: If the variable is undefined show “” instead of “undefined”

htmlEncode: If the variable contains ampersands, less than, greater than symbols or quotes HTML escape them.

trim: If the variable contains extra rwhite space, trim it.

substr(start, length): Substring the variable

lowercase: Transform the variable to all lowercase.

uppercase: Transform the variable to all uppercase.

capitalize: Capitalize the first letter of the variable, the remaining characters will be transformed to lowercase.

usMoney: Format in US Dollars. ie: $10.97

date[(format)]: Transform the variable to a date format, if the format argument is omitted uses the mask ‘m/d/Y’

stripTags: Strips the variable of all html tags.

You can also create your own custom formatting functions by adding a new method to your template instance and calling it by prepending this. to your format function like this “{VARIABLE:this.<FORMATFUNCTION>}”

Here is a sample which adds a new function called yesNoFormat to an instance of a template. yesNoFormat is similar to a ColdFusion function which converts ‘truthy’ values to the word “Yes” and ‘falsey’ values to the word “No”.

var testCustomTpl = new Ext.Template(
    '<div>User: {username} IsRevoked: {revoked:this.yesNoFormat}</div>'
);
testCustomTpl.yesNoFormat = function(value) {
	return value ? 'Yes' : 'No';
};
testCustomTpl.append(document.body, {username: 'aconran', revoked: 1});

Note: This post will continue when I found something else and developing some examples on Ext JS Templates.

No Comments