Thursday, July 8, 2010

Playing with the For Loop in Java

Dynamic languages have emerged as a powerful force lately. This has happened for some obvious reasons. Last year when I started learning Ruby I thought that I migrated from OOPS Demo to OOPS Enterprise Edition. Everything turned out to be so flexible and so OOPS! Now if you have used Ruby or Python then you must be smiling and telling yourself “I know exactly what you mean.”

However this is not our point of discussion and you don't need to know any dynamic language to follow this tutorial.

Actually I started using this technique after using the ruby block(obj.each{|a| ...}) that lets the programmer do things effortlessly. If you know ruby then you'll understand what I mean but if you don't know then don't bother.

The whole thing comes down to how you treat the for loop. Please don't treat it as:

Magic: Every line of code that you write and that gets compiled without errors follows some logic. Back in the days when I was 12, I used to think of it as some kind of a magical thing that happens whenever we write some code and then after executing the program the computer shows the result.

For i...Next: If you have been a Visual Basic programmer all your life then please don't treat the c/c++/java for loop like

FOR i=<Lower Bound> TO <Upper Bound> STEP <Step>
….to do
NEXT


So now let us take a look at the for loop structure closely.

for( initialization ; condition ; incrementation )
{
//Code
}


If we had to write an algorithm for the above loop structure then it would look like

1. initialization
2. IF NOT condition THEN GOTO 6
3.//Code
4. incrementation
5. GOTO 2
6.


In simple English the compiler first executes initialization. Then it checks whether condition is true or not, if it evaluates to be true then the compiler executes the given code block, executes incrementation and then again sends the control back to the condition checking line.

If pay close attention you will notice that initialization and incrementation get executed. We can put in anything that we want as initialization and incrementation! So basically the following piece of code

for(int i=1;i<=10;i++)
System.out.println(i);


can be written as

for(int i=1;i<=10;System.out.println(i++));


So we punch the second line into the first one. Nice!

Here is a more practical example

Write a program to find the number of spaces in the sentence “Ralph is a good boy.”

Here is the sleek and sexy ruby code which solves the above problem.

c=0
"Ralph is a good boy.".scan(/./).each{|a| c=c+1 if a==' '}
puts c


Now here is the solution in Java

class foo 
{
public static void main(String args[])
{
int c=0;
String str="Ralph is a good boy.";
for(int i=0;i<str.length();i++)
{
if(str.charAt(i)==' ')
{
c++;
}
}
System.out.println(c);
}
}


15 lines huh? If you compare the lines of code, Ruby:Java::1:5. Now let's see what can we do to reduce the number of lines.

class foo 
{
public static void main(String args[])
{
int c=0;
for(int i=0;i<"Ralph is a good boy.".length();c=("Ralph is a good boy.".charAt(i++)==' ')? c+1 : c);
System.out.println(c);
}
}


Bingo! Straight down to 9. So the new ratio is Ruby:Java::1:3! You can use this little technique to reduce your LOC.

Cheers!

Wednesday, July 7, 2010

Twitterish Marquee

I absolutely love the marquee used by twitter on their homepage. Simple yet elegant. In this tutorial I will show you how to make a twitter style marquee which fades in and then fades out beautifully.

I don't know whether the twitter designers have used this technique to customize their marquee but this is a simple and easy way to replicate it.

Requirements:

  1. Basic understanding of CSS and HTML
  2. A graphics editing package like Adobe Photoshop or Gimp
  3. A text editor
  4. A web browser

Now for this tutorial we won't use the colors used by twitter but we will make a gray text scroll over white background.

Fire up your favorite graphics editor and create a new document width: 30px ,height: 18px with transparent background.

From the color swatch select white (#ffffff) as your foreground color and then select the gradient tool. From the gradient style select Foreground to Transparent. Apply the gradient from left to right and save it as left.png . Flip the image horizontally and save it as right.png

So now we are done with the faders and with our graphics editing package. Next we need to code the CSS file which will define the style for our marquee.

First off we need to create a container which will hold our marquee.


#container{
background-color: #ffffff;
width: 500px;
}

Pretty simple huh? A white box which is 500px wide. That's it. Now we need to customize our marquee tag.


marquee{
color: #A0A0A0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
background-color: #ffffff;
}

Again pretty simple CSS code which defines the font family, the font size the font color and the background color. Now we will define both the faders and a scroller which will hold our marquee tag.

#faderLeft{
position: relative;
float: left;
background-image: url(left.png);
background-repeat: no-repeat;
height: 18px;
width: 30px;
z-index: 20;

#faderRight{
position: relative;
float: left;
background-image: url(right.png);
background-repeat: no-repeat;
height: 18px;
width: 30px;
z-index: 30;

#scroller{
position: relative;
float: left;
width: 410px;
margin-left: -15px;
margin-right: -15px;
z-index: 10;
}

Basically the marquee works like:

Looks ugly but this is only a graphical representation of “How It Works!”. The left fader floats to the left of the container, the scroller floats left next to the left fader and is 410px wide. The right fader floats to the right of the container. Now have adjusted the margin-left and margin-right properties of the scroller to slide it under both the faders. The scroller has the lowest z-index value since it should stay at the back and the faders should be on top of it. Save your CSS file as style.css.

Now we will put it all together in our HTML file.


<html>
<head>
<title>Twitterish Marquee</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="faderLeft"></div>
<div id="scroller"><marquee onmouseover="javascript:this.stop();" onmouseout="javascript:this.start();" scrollamount="3" behavior="scroll">Aliquam vulputate ligula at justo laoreet feugiat. Nunc. <span style=" font-weight:700">New Topics</span> Nulla vel elit ac ipsum tincidunt suscipit <span style=" font-weight:700">Hot Topics</span> Morbi tempor est vitae metus congue vestibulum. Nam turpis est.</marquee></div>
<div id="faderRight"></div>
</div>
</body>
</html>

That's it!! Save the file and test it. Here's you custom made twitter-ish marquee. Customize the color scheme as per your requirements.

Cheers!