Innovate with Google Maps and Google Docs

Have you seen IT companies websites recently? They doesn't seems like they themselves are aware of the true potential of Web 2.0. Here are few tips and trick to use when (re)designing your company website.

Company's Contact Us web page / Locate Us pages are simple static content with address. Hard to visualize and outdated, doesn't reflect company's diversity, even when the office addresses runs to the bottom of the page. You should, at that point, think back and check whether the website represents company's brand.

Here is an example to spruce up the company's contact information. Company website is the first point of entry for a customer where he would like to visualize about company's capabilities to do certain things. What is far more amazing is that you doesn't need to be a Javascript or web designer guru to do this.




Doing this was so simple in Google docs, that all I needed to do was to enter my fake company's address in one column and contact information in another (Okay, I cheated I used little bit of HTML to make contact information look good). Than I selected the range and told Google spreadsheet to insert a Google Map gadget. Once I am done customizing the gadget I asked for publishing URL and whoof!! I got this beautiful looking Google Map representing my company's location. I could have done far more innovation had I have been used Google Maps API.

The possibilities are unlimited but you have to open your mind towards them.

Grails - A RAD framework

During my quest to learn a new framework I stumbled upon Grails. I have heard about it very often but actually never dared to dive into it thinking that it might be yet another scripting framework like Ruby. But I was wrong and I must admit that I was mesmerized by what I saw (read it as "with What I achieved") in Grails. On the homepage of grails it says "the search is over", its a bold statement to make, but quite frankly it will make you feel like it when you start discovering its power. 


It is actually what Java should have been if it would have been written in 21st Century. The ease with which it helps you handle MVC architecture is great but what is amazing is the ease with which it handles CRUD operations and performs things with "convention over configuration" approach.


Long back I was wondering when a programming language be written which can understand plain simple English and performs the tasks. Grails does it and does it pretty good, no wonder it has developed so many followers. I mean who would not want to get away from reinventing the wheel all the time and just concentrate on building some lean mean applications.


The Grails community is also shaping up pretty well with so many plugins supported each day, I can only assume that this is the next generation framework. Do check back after some time as I will be publishing my first hand experience on Grails very soon.

CSS: Using every declaration just once

While surfing for best practices on Internet, I found this article on Google code site. It was an interesting article which was mostly directed towards web developer, but since j2ee deveoper also do some sort of web deveopment, I thought it will be a good idea to share with you guys.

Author: Jens Meiert, Google Webmaster

Recommended experience: Working knowledge of CSS

Original Site: http://code.google.com/speed/articles/optimizing-css.html

A logical way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.

Using every declaration just once means making strict use of selector grouping.

For example, you can combine these rules:

h1 { color: black; }

p { color: black; }

into a single rule:

h1, p { color: black; }

While this simple example appears almost obvious, things get more interesting and harder to quantify when talking about complex style sheets. In our experience, using every declaration just once can reduce the CSS file size by 20-40% on average.

Let's have a look at another example:

h1, h2, h3 { font-weight: normal; }

a strong { font-weight: normal !important; }

strong { font-style: italic; font-weight: normal; }

#nav { font-style: italic; }

.note { font-style: italic; }

Applying the "any declaration just once" rule here results in:

h1, h2, h3, strong { font-weight: normal; }

a strong { font-weight: normal !important; }

strong, #nav, .note { font-style: italic; }

Note that the !important declaration makes a difference here. There are some things to keep in mind when applying this method:

First, overly long selectors can render this method useless. Repeating selectors like html body table tbody tr td p span.example in order to have unique declarations doesn't save much file size. In fact, since "using every declaration just once" might mean a higher number of selectors, this could even result in a bigger style sheet. Using more compact selectors would help, and would enhance the readability of your stylesheet.

Second, be aware of CSS regulations. When a user agent can't parse the selector, it must ignore the declaration block as well. If you run into trouble with this, just bend the "declaration just once" rule - and use it more than once.

Third, and most importantly, keep the cascade in mind. No matter if you're sorting your style sheets in a certain way or are very relaxed about the order in which rules appear in your style sheets, using every declaration once will make you change the order of the rules in one way or another. This order, however, can be decisive for a browser to decide which rule to apply. The easiest solution if you're running into any issues with this is to make an exception as well and use the declaration in question more than once.

Alas, this is not always trivial to implement-this may change the cascading order and require a different workflow.

Workflow

"Using every declaration just once" requires more attention when maintaining stylesheets. You will benefit from finding a way to track changed and added declarations to get them in line again. This is not hard when using a more or less reasonable editor (showing line changes, for example), but needs to be incorporated into the workflow.

One way, for instance, is to mark rules you edited or added by indenting them. Once you're done updating your stylesheet, you can check for the indented rules to see if there are any new duplicate declarations, which you could then move to make sure each one of them is only used once.

Unit Test Helper

Working on JUnit is fun and great but always remember a golden rule "Never change a good design just to make it accessable/runnable by JUnit". Let me elaborate on this statement to tell you what exactly I meant. In our code we write data access layer, which creates connections and execute sql.

Specially in Web Application, connections are often managed inside container and are accessed by our code using JNDI. This is one of the industry best practices. Problem is how to test that code outside the Container. How to make that code JUnit accessible.

Normally we might make some changes in our code in order to make JUnit run outside container, DON'T. With the above statement I meant these kind of changes specially. But the question is what is the solution for this situation. Should you leave that code untested? No, you can still test that code. And I am not going to talk about any new testing methodology either. You can test the same code with simple JUnit.

This is made possible a small helper jar called JRUnitTestHelper from Java Ranch. This junit utility helps create JNDI based datasources and connections at the run time to assist junit test the code efficiently.

Using this jar is very very simple, put this jar in your classpath while running your junit test and call these two lines

if(JNDIUnitTestHelper.notInitialized()){

JNDIUnitTestHelper.init("jndi_unit_test_helper.properties");

}

And of course please mention your connection details like IP, port, username etc in this "jndi_unit_test_helper.properties" properties file. Please feel free to shoot me emails if you have any questions.

The jar for this program can be downloaded from JavaRanch.

Google Maps

Google Maps is an interesting feature which most of us have used in some way or other. Either to find the way to a friend's new house or to locate a Pizza joint near our house. It helps and it sure do but what is interesting is to learn how to use this in our Applications to make them more user centric with all other Web 2.0 concepts.

Let me start with giving you some examples, you go to a Bank's website and click on Locate an ATM link. It takes you to a page where you select a state from a drop down (Eeeaaakkhhhh!!!). The selection than loads another drop down below it with the city information (Double Eeeaaakkkkhh!!). You than select your city and the page is refreshed with 50 entries and their address. Now its your job to figure out which one is the nearest one and in most cases you doesn't even know your neighborhood else you would not had to use this service. Now as a Web developer how can you make this easy and interesting for the user. How about using Google Maps for this? Nope I am not kidding you can integrate Google Maps with your application (For FREE!!). Check out Google Maps API it have very interesting example and usage.

To see a live usage you can goto my other blog Varun Smriti Udhyaan. It is a very flexible api completely usable using javascript technology and allows you to be very creative in finding the usage. Check out the examples and demo provided on Google Maps API page.

Be Creative...

Custom Error Pages

Nope you are wrong, I am not talking about errorPage="true" attribute in this blog. I am talking about few error messages which are sent by the server to the browser like 404. How often you have seen this page.
Now this is not a good way to treat your site visitors. The main problem with this kind of errors is that than the visitors can drift away from your site. So displaying a custom error message with features like navigation to similar pages or asking them to report a broken link is far better. You can do that pretty easily using the below mentioned solution.

Implement custom error pages to hide raw exception messages. To do this, simply add something like the following to your web.xml:

<error-page>
<error-code>404</error-code>
<location>/error/404.html</location>
</error-page>




Now you are free to write your own custom messages in the 404.html file

Here is something which is out of scope for this article but you may find interesting. Here are reference to some of the best 404 pages on the web. Best 404 Pages

Add bubbles to YUI

YUI has been a great tool to create fast RUI web applications. Intermediates, who are already using it, are complaining about important missing pieces. And experts are comparing it with other such libraries like DOJO, Script.Aculo.Us etc.

Few of the most important features which are missing in YUI are expandable/collapsible panel. Accordion Menu etc. There exists a library which spices up few things for YUI named bubbling library. It does not provide solutions to all YUI problems but it does provides some interesting widgets which can be plugged with existing YUI controls to provide some respite for the developers. 

The current version of bubbling library available is 2.0 which supports YUI 1.6.0 build. Earlier version can be used with YUI 1.5.2 build as well.

Site has got great documentation and the download size is really sleek with only 206 KB. Whether you choose to use it or not but I will recommend one visit to the example section of the site.

Cheers