Task-based UI

Loved this article. I’ve been researching User-interfaces a little recently (this book helped me along), and it is certainly a wonderful subject to explore. In recent years, I’ve tilted more and more to web designing as my forte, and one of the major aspects of a web site, often overlooked is site navigation. A tasked-based approach seems to be the best way to go about it.

I’m going to do an overhaul to this site based on some ideas. It’s going to make navigation super-easy, links intuitive, markup self-explaining and style valid and compliant. And of course, accessible.

Big plans, big mouth, little (enough) time.

SOAP-ping wet

All Consuming has a SOAP interface to its database. I made a reading list yesterday for the site, but it works with static javascript and doesn’t offer any kind of customisability at all, so a SOAP client in PHP looked to be the best solution. Unfortunately, there isn’t a single implementation of SOAP in PHP that works in this instance. My hosting company does not bundle Pear with PHP, so that solution is out. So is another dll which I have no use for since I don’t have shell access. The only code solution which I’ve found to work is nuSOAP, but it hasn’t been updated for an year, and it doesn’t work in this instance (it works with Amazon’s API though) since it doesn’t support proxy without a WSDL interface.

If anyone can find another working implementation of SOAP in PHP, I’d be grateful. Otherwise, I’ll have to hack the nuSOAP code to get things done.


Today I solved a rather interesting problem: To find (and display) all the combinations that can be formed from a word. Suppose the word entered is “abc,” the output would be “abc acb bac bca cab cba.” A little Combination theory in Mathematics would tell you that if the length of the word is n, the number of combinations that can be formed from that word is n! (i.e, factorial of n.) In the above case, it is 3! or 3x2x1 = 6.

I went about solving the problem in Pascal, and it certainly isn’t the language you want to program in for these kind of tasks. However, today it wasn’t my choice in the matter, so: Pascal it was. An explanation of the solution is given below (not the actual source code):

I used three functions for the task: combinationOf(word, stub), shuffle(word), and strip(position, word). combinationOf displays all the combinations of the word using recursion. shuffle (which shifts the word one position to the right, i.e, changes “abc” to “bca” and “bca” to “cab”) and strip (which strips the alphabet corresponding to the digit i.e, strip(1, “abc”) => “bc”) are helper functions called from combinationOf.

The crux of the code (which may not be valid Pascal) is given below:

function combinationOf(word: string, stub: string) : string;
var i: integer;
var prestub: string;
for i := 1 to length(word) do
prestub := word[i];
if(length(strip(i, word)) = 2) then
write(stub, preStub);
write(stub, preStub);
stub := stub + prestub;
combinationOf(shuffle(strip(i, word)), stub);


Python is the scripting language to run home to. If you want simplicity, elegance, a good (and some may say, enough) degree of control over your system, use Python to program in. And if you think code-readability is a moot point, go use Perl and don’t read this blog anymore.

Why is Python so good? Let me take the viewpoint of a engineering teacher (a bit unconventional engineering teacher) and try to go on from there:

We all know about Algorithms, Flowcharts and the eventual program right? What I’ll propose today is a layer between the algorithm and the program. People tend to think that algorithms and programs have a one-to-one correspondence (i.e, every statement of the algorithm translates to a statement in the program.) However, any person who has written an algorithm knows that this is bull shit. Abstraction is essential if we want to present something even remotely resembling normal human-speak. The layer between the program and the algorithm, this layer that I’ll term “Monologue” for no pretty reason than that I like that name, is what makes Python so great. A real life elaboration:

c = a;
a = b;
b = c;


a, b = b, c

The first, as many might have guessed is Any Other Language. The second is Python. The advantages, the simplicity, the mode of thought change that enables every Python programmer to go a step faster than Any Other Language programmers should be evident from this very simple example.

Coming back to Vysnu, here is how you write a python function to print the first n fibonacci numbers:

def fib(n): # write Fibonacci series up to n
   """Print a Fibonacci series up to n."""
   a, b = 0, 1
   while b < n:
      print b,
      a, b = b, a+b

And so, that concludes the lesson for the day. Go shoot some balls…somewhere.

Semantic Markup

Markup that you define should be self-explanatory. In fact, markup is self explanatory, use it such a manner that you don’t confuse its meaning. A simple example: The <h1> tag denotes a heading of level 1. In most sites, this tag is the name of the site, or in cases where the site has an image header, it’s the prominent byline. At least, it should be. Substituting <div id=”title”>Content</div> for <h1> is perfectly valid markup, but it is semantically much worse off because, the tag <h1>, by its definition stands for a heading. <div> tags, when used are ambigous, and a browser which is not CSS-enabled might not render it to satisfaction. Since the purpose of going to the extent of validating our pages is to make markup accessible to everyone, the latter practice defeats our purpose. Some rules to abide by: Navigation links are lists of links, so use the semantically rich tags <ul> and <li> to wrap your links, don’t use spans or divs (and for your viewer’s sake, don’t use tables.)

There is a distinction between using markup for a purpose, and using markup for stylistic gains. Since the holy grail of web developers (the complete separation of content, markup and presentation) is not at hand yet, it is left to the intelligent web developer to decide where to draw the line. For an example, on this site, the sidebar employs <h3> and <li> to separate links, but those elements have CSS inline rules binded to them. This means that they render quite differently than a normal heading of level 3, or a list element. Arguably, this could cause confusion among the users since this site behaves a little differently than they are used to for such elements. But I think it is a fair tradeoff. People who do have capable CSS-enabled browsers rarely need to delve into the code, but people who don’t have get a neat unordered list. I have my style specifications, my poorer viewers have their content. Everyone is happy.

The moral of the story? Semantic means something which has a meaning. Always assign tags to elements so that the tags tend to describe the properties that you want to relate to that element, and try to avoid generic tags like <div> or <span> wherever possible.