Webkoof

1. Be a good programmer first. (Point 2 to 14)
2. Understand the pointers, memory allocation and all those low level ‘outdated’ things. (Yes, even when you program in Java)
3. Learn the sorting alogrithms – You probably never going to write one, as your language has a built-in function for the job. But, Do it and understand the time and space complexities of each.
4. Remember the good old data structures like Linked Lists, Trees, HashMaps – even when the language provides abstractions for these.
5. Learn to use Objects properly.
6. Learn when not to use objects. Appreciate the fact that functional programming paradigm has its positives.
7. Seriously – seriously – even when it feels insignificant – seriously – comment your code.
8. Be comfortable with point 14.
9. Never stop learning – learn from everyone.
10. Be open minded. There is always a possibility of better solution.
11. Use IDE. Vim and EMacs are geeky but little help while writing code does not harm anyone. Pick any – Netebeans, Eclipse…etc.
12. Always keep a track of your code. Use a subversion system. (SVN/git)
13. Be platform agnostic.
14. Be comfortable with point 8.
15. Learn HTML – it’s NOT a job below your standards. Afterall, whole point of your application is to output HTML.
16. Understand symantics in markup. Even though you can make h1 look like p and p look like h1 – Do not do that.
17. Learn to make h1 look like p and p look like h1. Yes, I am talking about CSS.
18. Learn JavaScript, detect those memory leaks. Specially when you want to be a ‘backend’ developer.
19. Seriously, its okay to pick one JS framework (jQuery, mootools, yui – whatever) and be good at it than to know little bit of every framework.
20. Never forget the config files. Always read them. (httpd.conf, php.ini, redis.conf – everything)
21. Think about optimization and caching – always. You do not implement optimizations later.
22. Write a single deployment script. Deployment should mean pressing ‘enter’ once.
23. Learn SQL. SQL is not only about select, insert, update, delete. Understand transactions, triggers, views – use them.
24. Keep an eye for NoSQL. (Point 9)
25. Use firebug on daily basis.

The idea of this approach is following

1. Take two identical images: one colored and one grayscale.

2. Position them on exact same position. Grayscale image on top using CSS positioning and z-index.

<img src="gray.png" id="gray"
       style=" position: absolute; top: 20px; left: 20px; z-index: 100">
<img src="color.png" id="color"
       style=" position: absolute; top: 20px; left: 20px; z-index: 1">

3. Onmouseover event of the gray image, reduce its opacity to zero. It can be done by including following in the head section of the HTML page.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(this).find("img#gray").hover( function() {
			$(this).animate({ opacity: 0 }, 300);
                }, function(){
			$(this).animate({ opacity: 1 }, 300);
		});
	});

I am using jquery here to animate the opacity change. The number “300″ indicated time of animation.

That’s it. We are done. Look at the demo here. (In the demo, I have separated the CSS, instead of inline styles)

So many times creating dynamic flash charts is needed. Many nice application like google analytics and various tracking systems use it. Yahoo developer network provides ‘ASTRA Flash Components’, using which this kind of work becomes very easy.

You can download astra flash component here.

After you install astra flash, it adds various classes including audio playback, menu bar & various chart classes. And creating these things become very trivial. For example, lets create a line chart using it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 
//importing the package 
import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;
 
// Creating a new line chart
var chart = new LineChart();
 
// Reading the Data to plot from FLASHVARS
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var data:Array = String(paramObj["data"]).split(",");
for (var i:Number=0; i<data.length; i++) {
    data[i] = parseInt(data[i]);
}
var category:Array = String(paramObj["names"]).split(",");
 
 
/* Use the data we read as dataprovider
 We can also use simple arrays like :
 chart.dataProvider = [ 12, 45, 34, 23, 45]
 chart.categoryNames = ["Source1", "Source2","Source3","Source4","Source5"]
 
We can also use XML file to provide data.
*/
 
chart.dataProvider = data;
chart.categoryNames = category;
 
//style the line and points
chart.setStyle("seriesMarkerSizes", [10]);
chart.setStyle("seriesLineWeights", [1]);
chart.setStyle("seriesColors", [0xed561b]);
 
//style the axis colors
chart.setStyle("horizontalAxisColor", 0xff9999);
chart.setStyle("verticalAxisColor", 0xff9999);
chart.setStyle("verticalAxisGridLineColor",  0xffeeee);
 
// Add the chart to the stage
this.addChild( chart );

Now, we have a chart which we can embed in a HTML file. All the data for the chart can be passed via Flashvars as follows:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="lineChart" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="flashvars" value="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other" />
<param name="movie" value="lineChart.swf" /><param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="lineChart.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="lineChart" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="data=22,34,21,11,9&names=Windows,Linux,Unix,Mac,Other"/>
</object>

If you try to show/hide an element in javascript, you simply use the code :

//To show the object with id toHide
   document.getElementById('toHide').style.display = 'block';
//To hide the object with id toHide
   document.getElementById('toHide').style.display = 'none';

But, when you try to apply the same logic to show and hide table rows, you get distorted table in firefox, chrome & safari. Although it works well in IE.

This problem is irritating and the fix is very simple. Instead of display=’block’ use display=”

document.getElementById("toHide").style.display = ''; //To Show it Back 
document.getElementById("toHide").style.display = 'none'; //To Hide it again

Many times, we have to make a web page looking exactly like a given image. Sometimes, we have a picture or a pdf file and want to copy the exact color scheme. Opening the Image in a picture application and picking up the colors makes the whole development process very slow.

So, a web designer should always use a tool which can instantly tell you color code for any thing on the screen. I use ‘ZZOOM’ for this purpose. (Homepage: http://www.omiod.com/product-zzoom.asp) This is a free screen zoomer, color picker and image grabber, all in one!

As you can see in the screenshot, it tells you the exact color of any pixel on the screen and you can zoom the screen upto 15x. Its a very lite and useful tool for any web developer. It saved me alot of development time and I hope it will do the same for anyone using it.

Direct download link: http://www.omiod.com/dl/zzoom.zip