Blogger Ajax Api - Updated My Site..

Just 2 weeks of work, I am very happy to see how it came out. My Blog is now available to browse completely on ajax. Tested in FireFox 3 on windows and linux. IE7 and Chrome.

Since I host my blog on Blogger, I am able to avail Google's Blogger Ajax Api. I would want to distribute to opensource community. However, Due to limitation of time, much of the code is tighly scripted to sarathonline.com and its template. Albiet, The Source is javascript and can be viwed by checking the source. You are free to any part of code, with optional attribution (a link back would be appreciated :) ).

The Search box (based on Google Custom Search Engine) is also updated for some slick animation, if you are looking for a Google CSE with animation. You can check out the source.

Please check out the my Ajax blog. I would appreciate any bug reports, suggestions or comments.

Feeling Ominous about IE8?

Look What I found on my webware feed last night :D NullPointerException

-Open Source!

Faster webpages with fewer CSS and JS

Its easy, have lesser images, css and js files. I will cover reducing number of images in another post. But If you are like me, You always write js and css in a modular fashion. Grouping functions and classes into smaller files (and Following the DRY rule, Strictly!). But what happens is, when you start writing a page to have these css and js files, you are putting them in muliple link rel=style-sheet or script tags. Your server is being hit by (same) number of HTTP Requests for each page call. At this point, its not the size of files but the number server roundtrips on a page that slows your page down. Yslow shows how many server roundtrips happen for css and js. If you have more than one css call and one js call, You are not using your server well. How do you achieve this? By concatinating them and spitting out the content as one stream.

So Lets say I have util.js, blog.js and so.js. If I have a blog template that depends on these three, I would call them in three script tags. Which would mean 3 hits to the server. However using ssi, php or python you can map one url to include at serverside, these files together. (This can also be implemented effectively in JEE). Using url mapping (util_so_blog.css) to a php/py/ssi/java action class, that (dynamically) spits out these files together. So that one url can be called in the webpage on trip to the server. But then how many such url mappings will you do. Again, DRY. Make it a a parameterized cgi.

Something like <script src="/jscss.php?files=util,blog,so" >(or better yet make it rest-like /jscss/util/blog/so.css)and the php file just reads the files, maintaining the order, spits out the value in it. You can even set the cache header in the response, so this is not repeated by the same client in the subsequent requests. Next step of tuning, cache the server side concatenation itself.

For the set of files, the server will output the same concatenated output (most of the time). Even though the call is cached in web browser on the client, for multiple clients your server does the same thing. So put a layer of caching. Say like memcache (if available). I intend to post implementation code in future posts, but the whole idea can be put into a picture like below



Honestly, I dont see why Google JSAPI for AjaxLibs doesnot do this? In order to load multiple Google API, you need to make multiple .load() calls, which invoke multiple script tags (HTTP Requests). GWT on the other hand is a total sucker for this. As a matter of fact, GWT generates a number of JS files for a set of combinations at compile time. Its a fabulous architecture, can be observed in this presentation 

In JEE, there are Object level cache implementations. For this specific use I recommend something like Oracle AS WebCache. Its been a while I used it but, it is good. It stands between your appserver and the client and caches by url (as key). It is configurable to cache by a header setting / url filter. It can also set cache-headers to the content on the way out.

Java TimeZone ++: mapping Calendar to Oracle Date or TimeStamp

In Oracle Database date and timestamp columns can be read in java using s[g]etTimeStamp() methods for storing date and time information. However, they do not save the TimeZone information! The read and write operations are done on java.sql.TimeStamp which is a subclass of java.util.Date. When reading and writing to database, they just write out the *face value* (read my previous post on dates for explaination) in Java VM's default TimeZone the code is running on. And read the value too 'TO' the java VM's Default TimeZone. So assuming you WriteDate program on a VM in EST and ReadDate program on another VM in PST (or just change system timezone) - You are getting a different *value* in the date Object.

So, How do you tackle this issue. The best way is to set your application to run on a specified (constant) default timezone. As mentioned in the earlier post this can be achieved by TimeZone.setDefault(). If you are unable to do it (For reasons unknown to me, so far), JDBC specification allows sql dates to be read and written using a specified calendar. The resultSet.s[g]etTimeStamp method has an overloaded cousin, that takes a Calendar parameter. These methods save the date *face value* into the db after converting it to the timezone of the calendar passed as argument. So if there is a central place, You would want to have code some thing like this.

static final Calendar networkCal = Calendar.getInstance(TimeZone.getTimeZone("EST"));

 //Writing somewhere
 PreparedStatement ps = conn.prepareStatement("Update datex set dt = ?, tms = ?, faceval =? where id=1");
 ps.setDate(1, new java.sql.Date(userDate.getTime()));
 ps.setTimestamp(2, new Timestamp(userDate.getTime()), networkCal);

 //Reading Elsewhere
 ResultSet rs = st.executeQuery("select * from datex where id = 1");
 sqlTS = rs.getTimestamp("tms", networkCal);

In iBatis (we use iBatis), You can have a TypeHandlerCallback for Calender-TimeStamp mapping

class CalendarTypeHandlerCallback implements TypeHandlerCallback {

    private static final Calendar netWorkCal = Calendar.getInstance(TimeZone.getTimeZone("EST"));

 public Object getResult(ResultGetter getter) throws SQLException {
        Date date = getter.getDate(netWorkCal);
        Calendar calendar = null;

        if (date != null) {
            calendar = Calendar.getInstance();
            calendar.setTime(date);
        }

        return calendar;
    }

    public void setParameter(ParameterSetter setter, Object parameter)
        throws SQLException {
        GregorianCalendar calendar = (GregorianCalendar) parameter;
        java.sql.Date date = new java.sql.Date(calendar.getTimeInMillis());
        setter.setDate(date, netWorkCal);
    }

    public Object valueOf(String s) {
        return s;
    }
}

A Sample jdbc test case is uploaded here. If you are using Hibernate, You could use a user type to get similar effect.

Adventurously, I used the TimeZone.setDefault method on non-production systems of an application involving Tomcat, WebLogic a couple of wars and one ear. So far, I have not observed any issues, Google doesnot have any pages that give any known situations either. If I come to know, I will update.

Java's Calendar Date and TimeZone - What is all about it?

Intenally, A Date object is nothing but a long value that holds the number of milliseconds since January 1, 1970, 00:00:00 GMT. So new Date() on Jan 21 13:53:58 EST 2009 would be the same as Jan 21 10:53:58 PST 2009 = 1232564038800 (precise to the last 3 digits). So how are those two different? TimeZoneOffset. This is a int value that give millisecs diference between GMT and the Specified TimeZone. So When *printing* or getting the value of date in TimeZone, this timezone offset is added to the long utc secs. This gives the new print value (or face value - Jan 21 13:53:58 EST 2009 ). The face value includes all calculations for Timezone and is meaningfully correct only when displayed with the Timezone information (as above). Just reading and writing "yyyy-MM-dd hh:mm:ss" is incorrect. To start with let me show a small example:

Date t = new Date();
System.out.println(t);
//internal value - same (precise to last 3 digits)
System.out.println(t.getTime());
System.out.println(System.currentTimeMillis() );
//The following will change where you are running this code
System.out.println(t.getTimezoneOffset() );

Run the above program twice. Second time around set your system time to a different timezone. You will see in java.util.Date, a timezoneOffset is always set to match VM's Default TimeZone. What this means is that, the face value of [new Date()] is different on  VMs running on different Timezones, even when run at the same time.  And also, this TimeZone is not mutable on a Date. So When you need to SPECIFY a timezone, you use java.util.Calendar. The Calendar encapsulates a Date (internally the other way around, which is way complex and out of the scope this article) to spit information in TimeZone specified. So you could run on a VM in EST at Jan 21 13:53:58 EST 2009 something like

Calendar c = Calendar.getInstance(TimeZone.getTimeZone("PST"));

c holds the current time in PST = Jan 21 10:53:58 PST 2009.

If you do sysout on c, you will get a long GregorianCalendar Output. You should print it as

System.out.printf("%02d/%02d/%04d %02d:%02d:%02d in PST", c.get(c.MONTH)+1, 
    c.get(c.DATE), c.get(c.YEAR), c.get(c.HOUR_OF_DAY),
    c.get(c.MINUTE), c.get(c.SECOND));

Ouput will be 01/21/2009 10:53:58 in PST
However, The Date inside this calendar will not be in PST. It will be on System Timezone.

So If I print c.getTime() it will show Jan 21 13:53:58 EST 2009 instead of Jan 21 1:53:58 PST 2009.

Suppose you want your program to be independent of the TimeZone of the end users' VM. Example, You have an applet (or an application deployable on network) that sends information about client events and their timing, and you want to collect them in to a global list. And that the timing be reported in GMT all the time. You can set the Default TimeZone by doing TimeZone.setDefault(TimeZone.getTimeZone("GMT")). Warning: Do this with care. Because, all future Calendar.getInstance() calls will be in GMT.

Another important gotcha is when we are parsing a DATE string. Simply the innocent looking following code is soooo Evil

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Date userDate = sdf.parse("2009-01-21 13:53:58");

Running this in two different (in timezone) VM at the same time(like on a network or something) will yeild in DIFFERENT Date object. To eliminate that bug, Either Read it with timeZone or setTimeZone on sdf like this

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss z");
//or
sdf.setTimeZone(TimeZone.getTimeZone("EST"));

Update: A small test case to complement theory!

Making a better 404 page!

The old time 404 Pages are inherently dull. All they are supposed to tell you is: Sorry the file you are looking for is missing. Check spelling, or update Bookmarks. But with a little bit of creativity, you can actually make your 404 page Worthwhile!! Better yet, make it Ajaxy!!

The point is, the did already land on an non existing url! Reasons could be many; the page is in a new location now. or is completely deleted. But you dont want to really close the door on the visitor. Look at google's main site.. (It provides a search box on top. (isnt that what you were there for? in the first place). However, our users dont come to search. They ARRIVE on a link. My Idea is if its a missing spot, Ask the visitor to look around. Help him with a search page built into the 404 page.

One way is to point the 404 to a CGI or server script. Looking at the headers, you will have a pretty decent idea about where your visitor wanted to go. Then, instead of showing a boring message. Show him some search results. Yeah! Also Show the INFORMATIONAL message We dont want the user to look at a spam-like page eh? (:D). The other problem is 404 are executed even when some robotic web-spiders, or DoS attackers do their thing, burning down your bandwidth/resources. You just dont want to burn your server for stupid stupid robotic 404 traffic.

Now, Ajax gives you far more power in this situation. Use the Google Custom Search Engine. and Ajax Search API. I created a very simple one here. What it does is, looking at the url, it runs an ajax search to get related stuff from google. Now you want to HAVE this searrch done on YOUR site only. replace the value of siteToLookFor in the file to something like "*.yoursite.com". Thats it. The html file is droppable into any server. Once you put this file in your site send all 404s to this file, The only condition is that the 404 should NOT be a REDIRECT it should be a referrel (the url in the location barshould not change).

If you find better solutions, comment on! :) click here To see my 404 in action

image by Willem Velthoven

In javascript RegExp is also a global Object

Some time back, I was comparing Perl and JavaScript in their Regular Expression Features. I thought it was not possible to get the holders after the matching in JavaScript like in Perl. But looks like there is something like that. A little known, use of RegExp global js object.

Like for example, You want to parse the phone number 201-123-1234 and hold area code and number in two separate variables for further use, you dont have to match it twice and replace once with area code and once with the remaining.

You could just do something like

var e = "201-123-1234";
if(e.match(/([0-9]{3})-([0-9]{3})-([0-9]{4})/)){
 var area = RegExp.$1;
 var phone = RegExp.$2+""+RegExp.$3
} 

I used this for a more complicated JDBC Connect String to SQL Plus Connect String converter (YEah, it may be less complex than I thought.)

JDBC Connect String:

SQL+ Connect String:

Air Drag and Fuel Economy.. Really?

Driving back from work, this friday, My friend and I were having an interesting discussion. He suggests driving close to the car (tailgating ) in front and coasting there would improve the Fuel Efficiency because it reduces Air Drag. Spat came my answer: NO. My point was, even in a highway situation, this saving would be less when compared to the fuel expense to catch up with him if there was ever a break in speed (and that going back from work, speeds do break quite often). Not to mention the additional risk of an accident. Although I felt triumphant myself, He didnt bulge in. His example was, the cyclists in a marathon. They keep themselves together to reduce air drag and use lesser energy.

So in the weekend, I do this research. Apparently My friend was very correct on the Cyclists. It is scientifically proven that Cyclists get advantage by moving in groups and there by reducing the drag. Logically (theoritically too) it might sound appropriate to connect the dots to cars. But looks like it is not the case in all cases. If you are driving a car behind a truck, You will be reducing the drag. But practically, Most Trucks drive a standard 55 MPH or around it. Most cars now a days have a very well designed Frontal area to reduce the Coefficient of Drag (CD). At the speeds of the Trucks the cars of today are well designed for drag.

So what about tailgating other CARS. This case is even worse. Traffic situations like driving back from work, or weekend or holiday driving, would generally constitute a lot of heterogeneous traffic and breaking. So tailgating may *not* fetch you what you are looking for. Risk of an accident is much higher than when tailgating a Truck. On the other hand, On Highway, Edmuds gives tips, if you drive with less breaks and no switching lanes, you could achieve as much as 77MPH with better fuel economy otherwise.

In Conclusion, Over all, Coasting is much better than avoiding drag by Tailgating! Either way - Drive safe! And Drive green.

p.s: Did you Know? (My) Camry Hibrid has the best CD in its class!!!

image: treehugger.com

Addthis replaced with ShareThis

Update 02/05: I am in the process of *lightening* up the page. So removed the sharethis javascript popup. The sharing button now opens a new window, the sharing feature is updated to use addtoany.com (click the share button, its very simple api, just pass two params to a url). I realised the features given below even though are nice-to-have, dont *actually* add that much for this blog with small audience.

I changed the sharing articles snippet from AddThis to ShareThis. Of all the things, I hate about Addthis, It bloats your page with a bunch of generated script tags if you have multiple shared snippets. Like lets say if you add the gadget code into each post. The home page of the blog will have multiple script tags that are calling the same addthis.js. This will slow down the rendering of the page. And then, because, AddThis pretty much stopped updating? The dashboard is just so pale.

It has also been in webware sometime back, boasting to be the next digg. I am not sure about that, but here are the things I found.

• It is pretty neat. No multiple generated script tags hitting more js calls.
• Dynamic interface, fetches digg count et al.
• Has its own first level social network, All shared items go into users own MyShareBox they can share from there too.
  
• Good reporting.
  
• Highly Customisible. Promising API. Very sparsely documented (read "badly")
  
• Good community (forum).. not that addthis doesnot have one, but I found this better.
  

Re: Return of the Mobile Style Sheet

In one of the recent articles on ALAP, a Return of the Mobile Style Sheet is discussed. For a whole lot of reasons, I dont think this would really be going to be a return. Or atleast it will not be a happy camper in the web community.

At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they'll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.

Before I jump on to throw dog-pile on this "re-emergence", I would like to say, using handheld media switch in css linking is a very good way to QUICKLY make your site go mobile-friendly. All you have to do is to write up a new css link to your template and vola, your site is right up on iphone, Cool. But will you be willing to leave it to the browser to handle this for you?

Assuming you are of the type who would: lets see, most sites these days are dynamic, either on the server side or on AJAX front. Dynamic here reads not just appearance, data and behaviour too. Pages, most commonly are templated, generated at run time, with lot of data in it. For one thing, It would be easier to maintain a seperate template altogether and switch the content presentation based on user-agent on the server side. More over, sending all the bits over the wire and then NOT showing it just because on the other end it is a small device doesnot make sense. Even Ajaxy things - You would have to write another js and switch it some how to achieve the desired effect. Over all, you are only band-aiding something which needs a total surgery.

Lets say, it is still up for those semantic web vouchers; How will you sell this idea to Google, or Facebook. The case there is further more complex, but even for a simple home page like google's, a user-agent based switch of the template itself on the serverside has been preffered (that is how iphone's safari opens www.google.com). To let users choose the classic version, a link is provided at the bottom. Talk about freedom to choose :)

images from google blogs, infomotions

Numeric and String comparision in Shell

String Comparision is treated differently in Shell. -eq and -ne operators cannot be applied for this. -eq (and the clan) are applicable only when you are comparing numerics. If you have a String comparision, use = (sh) or == (bash).

Examples

##GOOD
#!/bin/sh
if [ "$1" = "set" ]; then
        echo "Setting"
else
        echo "Displaying"
fi

##ERROR
if [ "$1" -eq "set" ]; then
        echo "Setting"
fi

in bash

#!/bin/sh
if [ "$1" == "set" ]; then
        echo "Setting"
fi

New Year updates to the site

I made some minor updates to the blog site over the weekend, it now covers a wider screen area. Wider Sider bar. And a very own Ajax Search Engine. More coming.

To widen the layout, I not only had to change the width attributes of container and side bar, but also recreate newer top, bottom and shadow images using gimp and existing images.

The Search bar uses google Custom Search Engine and Ajax Search API.

Also there is an attempt to solve IE 6 png transparency fix via this jquery plugin. I havent tested it myself, but if someone has IE 6 or less, please let me know.

Happy New Year!!

Friends and Family,

I recieved this from my little sister, in orkut, from india.. Sweet Greeting eh?