It’s not endocrinology, after all!

One discussion that usually crops up between my colleagues at work is about accidental and essential complexity of software development. Practitioners within the field seem to agree that most software systems in existence currently are flawed in some way or the other. Many many people are working hard to make better software systems (for some arbitrary meaning of ‘better’), but more often than not fail in their lofty goals.

But as the quest for the software development silver bullet intensifies, more and more people are getting used to software systems in their daily lives – flawed software systems built by hard working programmers. I don’t really know how, but many of these users leave with an impression that building a software system is an easy task! A funny anecdote related to this phenomena was posted at TheDailyWTF recently (The title for this blog post is taken from that story) – recommended.

Rethinking Mockups

At work we are writing an application which is delivered in a single webpage with heavy use of JavaScript. Lately, I have come to realise that writing a web application using JavaScript does have effects in the way we work as a team. The rest of this post explains what I mean.

Initially, web pages had static content – the users requested a resource from a server and the server served out an HTML page it had. Then came dynamic web pages and web applications. The widely accepted way to create dynamic web applications was to use a template language eg: JSP, Velocity, XSLT, erb etc.

Two kinds of people collaborate when a dynamic page is built using a template language:

1. designers who are good at deciding the user interaction and look n’ feel of the page
2. programmers who are good at writing programs that generate the dynamic bits on a page.

The designers would design a static HTML page – a mockup – and get it reviewed by the business analysts. The analysts get an early chance to see how the web page would look like eventually; they can detect deviations from expectations early and might be able to correct them at this stage. Hard-coded data would typically be used in a mockup; it is the programmers job to replace it with dynamic content, resulting from some computation database query typically. Frameworks like Tapestry and Rife take great pains to make sure that designers and programmers can work together smoothly in creating dynamic web pages.

This is roughly the model we have been following so far at work – designers make mockups and deliver it to the programmers, who annotate those mockups to create the actual web pages. Throwing in JavaScript to the mix changes this workflow.

Designers when they work out a mockup use a series of HTML pages to show a dynamic interaction which in the actual application should be done with JavaScript. Writing JavaScript is a programmers job and it is unfair and unwise to expect designers to deliver the mockups with functional browser-side JavaScript interactions. Also, to decide the user interaction and look n’ feel and for analysts to set expectations a series of HTML pages would do. But such HTML mockup pages cannot be directly used by programmers as a starting point for writing the application. This is different from the way we have been working so far.

The solution would be to have another set of mockups created by programmers. This would retain the user interaction and look n’ feel designed by the designers, but would have functional browser-side JavaScript interactions. The data displayed on these mockups are still hardcoded ones though. The actual application can be built starting from these mockups. This essentially creates three kinds of roles (instead of the two earlier):

1. designers who decide the user interaction and look n’ feel of the application
2. client-side programmers who code the user interaction into JavaScript
3. server-side programmers who code the computations, database fetches etc.

In many situations, more than one of these roles might be handled by a single person; but the existence of these distinct roles would help manage the project better.

Outbound Links: Nielsen’s vision is here!

In his 1999 classic book “Designing Web Usability“, Jakob Nielsen writes on marking outbound links from a site:

A second option would be to show a pop-up with additional information about the link.

In the example image on page 69, I am showing the title of the destination page (retrieved from a proxy server) as well as the name of the remote site (possibly retrieved from a site definition or from the title of the home page). The arrow pointing to the site name can change color depending on whether the user has been to any pages on that site before. As shown by these two simple examples, web browsers have a long way to go with respect to supporting users’ navigation behavior.

Browser vendor’s haven’t yet implemented this feature, but I think Nielsen’s vision is here – and it is called Snap Preview Anywhere (SPA). If you are reading this post on the WordPress website, you might notice that hovering over an outbound link shows a small popup showing a preview (or “snap”) of the linked website. WordPress has enabled it for its hosted blogs – and I think this feature is a tremendous improvement in web user-experience.

Cheers to WordPress folks!

Corrupted Local Maven Repository

Yesterday I got the following error when trying to run my development server using Maven:

[INFO] ------------------------------------------------------------------------
[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Internal error in the plugin manager executing goal 

'org.apache.maven.plugins:maven-jetty-plugin:6.1.-SNAPSHOT:run': Unable to find
the mojo 'org.apache.maven.plugins:maven-war-plugin:6.1-SNAPSHOT:run' in the
plugin 'org.apache.maven.plugins:maven-jetty-plugin'

Googling around, initially, did not provide much help. But eventually I came across this post on ServiceMix users list, and my problem was similar to it. I worked around the issue by:

1. deleting $MAVEN_REPO/org/apache/maven/plugins
2. deleting all folders matching *jetty* in $MAVEN_REPO

Palunku: Highly recommended

Yesterday we watched Blessy’s Palunku. It’s a very good movie, and I highly recommend it to all Malyalees. With three very good movies in a row, Blessy is proving to be the best active mainstream Malyalam movie director.

Splash screen for a javascript application

At work we are developing a web application that is delivered in a single-page (like GMail, Yahoo! Mail etc). We use the Dojo javascript framework.

Our homepage has multiple javascript widgets. When a user gets to the homepage, the browser downloads the HTML, javascript and CSS files and there is a delay before the DOM elements are decorated and laid out properly. During this delay the user gets to see a partially loaded page. The user can’t start using the application unless the whole page is laid out well, so showing a partially loaded ugly page is not desirable. Yahoo! Mail shows a splash screen of Liam, their mascot, while the application is being loaded – I wanted to implement the same feature for my application.

Searching the Dojo mailing list, I was able to figure out how do this. Essentially you have two DIVs on the homepage – one with the splash screen and one with the real LayoutContainer holding the application widgets. Initially the splash DIV is shown, and the real DIV is hidden. When the page finishes loading and after all widgets are laid out properly, the splash DIV will be hidden and the real DIV would be shown.

function show_main_gui() {
    dojo.byId("splash").style.display = "none";
    dojo.lfx.fadeShow("real", 100);
}
dojo.addOnLoad(show_main_gui);
<div id="splash" style="position: absolute; top: 200px; width: 100%;z-index: 100;">
   <div align=center>
        <img src="images/throbber.gif"/>
   </div>
</div>

<div id="real" dojoType="LayoutContainer"
    style="opacity: 0.01;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);">
...
</div>

I got the throbber built at ajaxload.info – it is a great site for making throbber images.

Sukumari as Prem Nazir’s grandmother?!

Snippet from an televised interview with movie actress Sukumari:

Interviewer: From when did you start acting as a grandmother?
Sukumari: I don’t remember exactly when I started, but maybe since 10-15 years.
Interviewer: Have you acted as grandmother of Nazir sir?
Sukumari: Oh not, not Nazir sir! Maybe if he were alive today, I might have.

🙂

Handling session timeouts in an application with HTML IFrames

In the application I am working on now, we load portions of the application as HTML documents into an IFrame. If the user does not act on the application for some time, the session times out and the user need to be redirected to the login page. We had set up this redirect using Acegi. But when the user performs an action on an IFrame after a period of inactivity, the login page would be shown in the IFrame. This is, of course, ugly and I have been looking for a workaround for this. Today I got this fixed, but I am unsure how proper this solution is.

We now have a page called redirectToLogin.html with:

<script type="text/javascript">
    top.location.href="login.jsp";
</script>

All this page does is redirect the browser to login.jsp page, but this prevents the login page being shown in the IFrame.

Kindly drop me a note if you know of a better solution.