Peterbe.com

A rather impressive yet useless dependency graph of IssueTracker.py I created this graph simply by downloading py2depgraph.py and depgraph2dot.py from this website

The result is a big ass picture with little boxes that describe each little module that is connected to IssueTracker.py in some way. This image becomes rather useless to me because it digs down into python libs that the code never really goes near. To make this genuinely useful one would have to intercept the .dot file and remove references to libs that aren't interesting.

To me, AJAX (Asyncrounous Javascript And XML) patterns are only interesting if they work as a bonus rather than a must. I've written before about autosaving web forms whereby a form with a big textarea is autosaved on the server every 8 seconds. That feature took existing form functionality and used it in Javascript instead of user actions.

Now I've done it again (actually it was a couple of days ago but I've had time to write about it until now). When you on the IssueTrackerProduct, list issues you'll see a little button that makes it possible to enable "filter options". If you press that button it sets off a GET request to the server to re-request the same page but this time with ShowFilterOptions=true as a parameter. Here's some simplified code:

<div id="filteroptions">
  <form action="ListIssues">
    <input type="hidden" name="ShowFilterOptions" value="1" />
    <input type="submit" value="Show filter options" />
  </form>
</div>

How can we load the filter options widget on the List Issue page without having to refresh the whole page?

The answer is to use AJAX. The trick is to not require that AJAX works. Here's how I solved it. On the submit button I included an onclick and an onkeypress event attribute like this:

<input type="submit" value="Show filter options"
 onclick="return loadfilteroptions(this.form)"
 onkeypress="return loadfilteroptions(this.form)" />

The clever thing about this is the browser will now only submit the form (and hence a new request) if the function loadfilteroptions() returns true. Now in the loadfilteroptions() function, all I have to do is to tell if the AJAX trick worked or not. If I was able to load the separate widget there is no need to refresh the whole page so I return false. If for example, it's an Opera 7 user the AJAX request will have failed so I then return true which means that the browser should pursue with processing the form submission.

The resulting product is that if you have a decent browser that supports AJAX it takes virtually no time at all to open (or close) the filter options widget. If you have an old browser like (Opera 7, Lynx or Netscape Navigator) you'll just have to live with that it takes a few more seconds to reload the whole page.

Try it! (press the "Show filter options" button)

I'm on the lookout for a redesign of the IssueTrackerProduct. Not necessarily a complete redesign but its css and general looks need a serious upgrade. Sure it's built with web standards which means that all that is needed is to change some CSS, but in reality it's harder than that. I think I want to keep the general layout except that when you view a particular issue and I no longer want to center the issue and the followups and I want to have the options such as Subscription and Tell-a-friend in a right-hand menu.

The problem is that of inspiration. All good design I see on Zen Garden is for content that is very different from the issuetracker. For example, the issuetrackerproduct design must bare to do both the issueview and the List Issues which requires the whole screen. It just seems that all good design is made for web blogs which is very far from the issuetracker. I want to see design that is using up 100% of the screensize yet manages to not make the textwidth unreadably wide. Some of these narrow designs can be very nice looking but that's not what I'm after now.

The fonts might need to change too. Personally I'm quite happy with the fonts of the www.issuetrackerproduct.com and the general typographics of that site.

The grey needs to go. It's a tad too dull even though it's tone-difference makes for a good medium to deliver information. (grey'er means headline) But what colours can I use? ...without making it standing out too much (in other words, no orange or pink).

Please help me come up with some ideas. I guess a good start would be to revamp the headline with a new tabbed menu. Any ideas anyone?