blog redirect

Hey visitor, thanks for showing interest in my blog. As of now, my primary blog is changed from http://satyak.wordpress.com to http://satyablog.wordpress.com. Please keep reading and commenting.

Thanks.

reducing web page load time

these days , owrking on my project…my webpages are getting very fat withthe inclusion of custom java script code for ajax and validation. To achieve user-experience, im loosing on web page load time. Its taking a while for the page to load. This certainly is making a sectoe the users frustrated and possibly quit d site. So i was wandering a way to come out of this. This is waht ive realized:

1) Place only the very important css and js in the HEAD part. i.e only that css and js thats required 4 d rendering/layout of the page shall be included in the HEAD part. The rest shall go just before the </BODY> tag. This ensures that, the extra script and css which may be useful while validation/ajax stuff be loaded after the contents of the page gets loaded. This ensures that the page gets visible first…making the user not wait 4 a long time…and then get the other css and js.

2) Minify the js. This step involves requires that, u eliminate the extra spaces, comments, tabs in ur js code….thus reducing its size….so that it will take less time 4 d browser to load. The tool i use for this is JSMIN.

3) Also ensure that the number of css and script files are less. The number the number of script/css, the more the number of http requests it takes to access them. So it takes more time to load. So the best way is that..u put all the related js code in possibly one js file and similarly all the rtelated css in one css file. U can go for more if u feel that….its necessary to maintain d hierarchy. Thus, it takes less number of requests to load them.

These are the very basic steps to reduce the page load time. There are still 8+ techniques. The one i refer is yahoo’s suggestions. There a plenty more…Just say “web page performace” in any search-engine…..yuo’ll be flodded wid lnik dying 2 help u.

Hope this pages helps u. Happy webpages.

gravatar – spicing my off_code time

Working like a bulley these days, my boss gave me 2 days off from coding, so that i can regroup and resume with full force. I was wandering all over the web these 2days……..1st day was kinda drowzy. The second day today………it got lighten up when i found GRAVATAR. 

The idea behind it is very simple. Its to assign a universal PIC/Image to a user(identified by email address) and display this pic in all the websites which implement GRAVATAR.

Supposing, i register my email with gravatar and upload a pic for it. Now, if a site implements GRAVATAR and if im also liked with that site( say registered), then my pic uploaded in gravatar can be available to that site.

Supposing i wrote some comments in that site, along with name + body of the comment, the site can also display my pic. 

So, which ever site implements GRAVATR, if i have my foot print in dat site(say registerd, commented….what ever), then that site display my pic from GRAVATAR along with my name

The cool things are :

1) The implementor site doesnot have to spend space on saving my image. Its GRAVATARS headache.

2) People can recognize my comments looking at my pic…So when GRAVATAR goes big…number of sites implement this…….then every where i’ll be recognized with this pic. So no matter even if i have a diff user_name, i dont have 2 worry…..people can recognize me.

3) From the developers point of views (us), its quite simple…asa….counting 123., trust me .

I wnna implement this in my product asap…infact right away…..though im off-coding……i can resist the temptation. Lemme break the rule. 

The way the implementor website can get the pic is 2 simple steps:

a) The image url shud start with “http://www.gravatar.com/avatar/”

b)  a) + The MD5 encoded string of the LOWED_CASED email address.

How to generate the MS5 string depends on the programming lang (server side) u follow:

Better follow this link : GRAVATAR URL GENERATION

By the way, i used ruby rails for this……u can use any of the php/.net/……the list never ends

Hope u got it working………….If any buzz’s do comment here….i’ld luv 2 respond !

dynamic loading javascript and css.

Offlate….im enjoying my run thru web-development….once i started using AJAX. When i started 2 feel the spirit of AJAX…..i realized that…its taking too long a time to load the AJAX page. The reason……when the page is loading…it also loads the required JAVASCRIPT FILES entirely.

My page has a lot of AJAX functionality……theres no guarantee that the user is gonna use all of those functionalities. So, in that case……loading of all the javascript is not justified.  Then the question rises……is there a way where the javascript is loaded on demand…i.e Only when an ajax functionality is called….load the javascript required . Else, forget it.

Then, I thought……..NO WAY….But asusual……i found it as POSSIBLE.

This is called dynamic loading of JAVASCRRIPT. This is no different from creating an ELEMENT in HTML dynamically.  To create a TEXT INPUT ( <INPUT TYPE=”TEXT” name=”txt” /> ) dynamically….the code is follows:

var textInput  = document.createElement(“INPUT”);

textInput.setAttribute(“type”,”TEXT”);

textInput.setAttribute(“name”,”txt”);

Now, to add this element to a DIV whose id is say…div_id, we say:

document.getElementById(‘div_id’).appendChild(textInput).

So, following the same…..

to add a script, the HTML tag we use is <SCRIPT TYPE=”TEXT/JAVSCRIPT” src=”script.js” />.

Now to add this dynamically:

var fileRef = document.createElement(’script’);
fileRef.setAttribute(“type”,”text/javascript”);
fileRef.setAttribute(“src”,”script.js”);
document.getElementsByTagName(“HEAD”)[0].appendChild(fileRef)

What we are doing here is that: create an element, assign its to type=”text/javascript” , src=the script we wanna load. And add it to the HEAD element of HTML.

Thats it. …As simple ad that…Go ahead and make ur AJAX pages light weighted…….As im making my HTML PAGES very……lightweighted.

Also, u can also load CSS dynamically.

Also, also, also……U van remove the javascript and css dynamically. I dont think i have to explain why would one have to remove them. Its quite straight forward.

Reference

Satya — EVENTZS

using mx:repeater in flex with flex default components

This blog must help u to use MX:repeater component in ur flex apps quite omfortably. At the first meet, the usage of this component feels bitter, but on some careful understanding and bit of practice, u’ll fall in love with this wonderful component, just as me.

The repeater in flex behaves just like a loop in programming languages, except the fact that this repeater adds GUI components. It cannot do other logical operations and stuff.

Supposing i have an ArrayCollection instance(object) that holds links to 50 images that i’ve to put in an mx:TileList. Now, without repeater component , what we usually do is, write the <MX:IMAGE> tag 25 times inside the mxLTileList. This is OK for someone who doesnot prefer to dig deep. But not certainly us.

What if there are some elements that would be added/deleted/modified to the arrayCollection dynamically. Hey, those who dont dig always will find a work around. The work around is simple though…Find the item in the arrayCollection which is modified, say “i”, then change the source of the i’th image in the TileList. The i’th child of the TileList can be obtained by tile.getChildAt(i);, where tile is the “id” of the TileList.

Aaaah, this requires a bit of Actionscript and certainly a lot of Sweat. Why toil, when someone’s dying to help u. Its none other than mx:Repeater.

Repeater does all the job mentioned above:

1) Initially add all the images whose sources are there in arrayCollection to the TileList.

2) Change the images in TileList whenever the arrayCollection changes.

Hola, everythigs done. U must be loving repeater now.

Now lets dig deep into repeater component:

The following are the important attributes of MX:Repeater.

1) id — unique identifier:

2) dataprovider — dataobject.

eg: <mx:Repeater id=”imagerepeater” dataProvider=”{images}” >

<mx:Image source=”{imageRepeater.currentItem.img}”/>

<.mx:Repeater>

Thats it job done…

The mandatory things are:

1) The dataprovider should be [BINDABLE], so that any change to the arrayCollection will be caught by the Repeater and reflect it.

If u remember, at the begining of the document i spoke abt “Repeater loops …”. Now thw question is on which is it going to loop. The usual loops that we write, we ask it to loop on an array (foreach in PHP) or from i=1…10(Normal FOR loop). The dataProvider is an object on which the the Repeater  loops.

Supposing here, we assigned the images arrayCollection as the object to be repeated on. Now, the repeater loops on the arrayCollection (images), and for every pass, it outputs the component specified inside the REPEATER once. So, The number of components outputted by the Repeater will be equal to the number of elements in the dataprovider object(here, it is the images ArrayCollection).

Just like, the forloop if looped from i=0…10, executes the loop body 10 times, the same way, the repeater outputs the component specified inside the repeater, as many times as the number of elements inside the object on which it is looping, DATAPROVIDER.

Now, For each image inside the Repeater, we’ve to specify its SOURCE attribute. For image 0, the source is in images[0], image 1, the source is in images[01]…and so on.

We have two attributes called CURRENT INDEX and CURRENT ITEM for the repeaterobject.

If we say, imageRepeater.currentIndex, it will return the number of times the (loop body) repeater body is executed.  It is just like , if we have for(i=0;i<10;i++) , inside the LOOPBODY, i indicates the PASS NUMBER.

tcpdf — Dynamic pdf builder

Working on my current project, which as my boss says ‘confidential’…, i came across a requirement where i’ve 2 generate PDF files on the fly. Say, the user enters his details, and in return, a pdf file should se sent back…which one can save, print or whatever.

ZEND, as i believe already has a PHP library. but its quite primitive in stage. Then did i find this open source library TCPDF. This works in PHP. The latest version of TCPDF is 5.0 . It has a wide spectrum of functionality like :

• no external libraries are required for the basic functions;
• supports all ISO page formats;
• supports UTF-8 Unicode and Right-To-Left languages;
• supports document encryption;
• includes methods to publish some HTML code;
• includes graphic and transformation methods;
• includes bookmarks;
• includes Javascript and forms support;
• includes a method to print various barcode formats;
• supports TrueTypeUnicode, TrueType, Type1 and encoding;
• supports custom page formats, margins and units of measure;
• includes methods for page header and footer management;
• supports automatic page break;
• supports automatic page numbering and page groups;
• supports automatic line break and text justification;
• supports JPEG and PNG images whitout GD library and all images supported by GD: GD, GD2, GD2PART, GIF, JPEG, PNG, BMP, XBM, XPM;
• supports stroke and clipping mode for text;
• supports Grayscale, RGB and CMYK colors and transparency;
• supports links;
• supports page compression (requires zlib extension);
• supports user rights management so Adobe Reader users can save filled-in copies of forms they complete.

Definitely, this is a cool library for those who love to do hard-core stuff with PHP.  For, further study …

TCPDF home website

Here, go for the DOCS tab, for installation, examples and other stuff.

TCPDF Dcoumentation

Here, u’ll have a clear description of each of the variable and method this library.