Monday, December 20, 2010 2010

The 10th and sadly last took place this week in Bangalore. I was there for all three days of the conference and it was great. This time around we were 6 students from my college. In addition, at the last minute a lot of KDE developers did turn up, including Vishesh Handa, Pradeepto, Abhishek and Sujith.

Danese Cooper’s opening talk about the architecture of Wikipedia was inspiring. That one of the top 5 websites in the world, is powered by just 450 servers and 60 people is an inspiring tale of open source skill and passion. Danese was here to consider a possible server location in India to serve Asia. Wikimedia was also kind enough to give t-shirts as part of the delegate kit. The calendar in the delegate kit also has stunning wildlife photography. lunches are always delicious so that came before any talk. With Nokia being one of the sponsors, Meego was being pushed heavily with 2 days of talks and workshops. Nokia is already pushing QML as a… but I’m getting ahead of myself.

So yes, on day 1, Aditya Bhatt had a talk on libface which by the way, will identify anything as a face. Rahul Sundaram’s talk about Fedora’s early mistakes was good learning for other FOSS projects. But I was distracted by this time by the announcement that Nokia was giving away two or three N900s!

To those who don’t know, the N900 is a hand held computer powered by Maemo, with complete root access and lots of developer friendly features. At the same time it gives any smart-phone the run for its money. Nokia has been agressively pushing the N900 to developers so that the Meego platform can start getting application support. Since Qt applications run directly on Meego, KDE developers are a particularly strong N900 market. Now it was my chance to get one! The catch was to make a QML/Qt based program and submit it on the third day of the conference.

I’ve had QML in my sights for quite some time, but never took out the time to actually try it out. Here was an opportunity. So I made Solarwolf in pure QML and JavaScript. QML’s state concept is very interesting and makes sense if you’ve read Computation and State-machines. Of course there are certain areas where it was much easier to write imperative code in JS. The code itself was written sprint style and is not the neatest or most refactored. What QML really needs is something similar to inheritance so that certain common properties (for example all Sprites have movement deltas) can be factored out. In addition it is odd that all Qt properties and classes have not been exposed in QML’s scripting environment. Things like QRect::intersects() would have been very useful.

Day 2 had Abhishek Patil’s talk about scripting Kate which was insightful and shows what an awesome piece of software Kate is. Anand Mitra’s talk about ZFS was the best technical talk in my two years at He clearly had a good understanding of ZFS (seeing that I had nothing) and made everyone aware of the challenges of porting such core programs like filesystems. Leveraging the Git Object Store by Ramkumar Ramachandra was a good way to know how dumb git is. After that I skipped all the talks to hack on Solarwolf, so I’m not aware of the others. Fahrenheit did do a good show however.

By that night my game was pretty much done, it was working on Dinesh’s N900 and so with a bit of polish the next morning I was ready for submission. But with that, and talking to a few people about various things I missed all the talks, including CouchDB and QtWebkit’s graphics layer.

Aanjhan Ranganathan’s “A Hacker’s Apology” was a brilliant end to the final The point about preaching Hacker Culture, and not politics or philosophy is the most important thing today. Encouraging everyone in the world to be curious about their surroundings and always asking why should be encouraged, rather than fighting about whether its Linux or GNU/Linux :). The slides aren’t up yet, but everyone should see them when they are available.

Following some moments of nostalgia by Atul Chitnis, The Raghu Dixit Project brought the house down with their superb music!

I won!

That’s right. I have a brand new N900. With a high-quality Bluetooth headset too. This chronologically goes in on the last day at around 5:00 pm, but I thought it deserved a seperate section. It’s a great phone except for the lack of STK support. Some of the little UI touches and shortcuts are especially heartening. They lend true geekiness to the phone. The camera is more than good enough for me, it plays virtually everything I throw at it, and it has inbuilt UPnP support! Now its time to play Angry Birds.

Me, Aditya, Dinesh, Mohit, Viranch and Nirmal.

Posted via email from nikhil's posterous

Wednesday, December 15, 2010

Introducing Mugshot

There is a certain fun in hacks, little projects you do on a whim and finish in a few days. And then you go and buy a domain for it and launch it. That's Mugshot.

Mugshot is a web service which offers face-detection. It uses the libface library which was implemented mainly as a Google Summer of Code project for KDE. So one day I was thinking that services like Facebook and Flickr allow you to upload images and then tag them. But why not let the faces be detected automatically. So I hacked out Mugshot. It doesn't wrap the entire libface api for node.js, but only one function to detect the faces. Further details can be found on the website, including the documentation.

At the moment libface can stumble on some faces, but when it works, the results can be quite interesting! That image is by Pierre Tourigny and is under the Creative Commons Share-alike Attribution license. Its used to avoid uploading any real faces.

Are there plans to add recognition support and other advanced services? I don't know, maybe if I have a whim. Meanwhile, go fork it.

Posted via email from nikhil's posterous

Thursday, December 09, 2010

Synapse 2011: Behind the website

Synapse 2011 Homepage

The Synapse website undergoes a over-haul every year to stay in sync with the theme for that year. Since the last year, I’ve been the webmaster and programmer for the website. Which means I do all the HTML/CSS/JS/PHP/SQL dirty work.

This year’s theme for Synapse is “Silver Screen”, having to do with legendary movies and so on. Their is always the need to bring something new to the website, something that differentiates it from a normal website. At the same time it has to:

  • degrade on older browsers
  • be standards compliant
  • have clean URLs
  • readability
  • look good in 1024x768

The last requirement is a by product of the maximum screen resolution in our computer labs. Finally, I’m the kind of person that develops kinesthetic memory about websites and like things to happen fast. If I’ve to wait for a navigational element to load before I can click on it, that just annoys me.

The Synapse website team is listed on the contact page. We started working in October. I don’t remember how, but we had agreed to use horizontal scrolling. It was either that or a 4 way grid like NoFrks. I had seen it in action at Join the Game and it looked good if executed well.

Platform choices

Our website is powered by: * CodeIgniter * MySQL

The backend is virtually untouched from the 2010 version. CI uses great url –> filename mappings, and I took full advantage of that to create a very dynamic website. Helpers are another use advantage. For an example, quite a lot of events require registration. Manually going to every page and adding an event specific link seemed like too much effort. Instead I inserted a common function in every page, and the function consults a table to see if the event actually requires registration or not, and returns the appropriate link. Given a choice I’d liked to use Python, but our server does not support it, and this way was probably better in time savings.

On the client we use: * jQuery * jCarousel * simplemodal * tinyTips * easing * lightbox * scroll * Some CSS3 for rounded corners and WebFonts when available

CI also allows clean URLs using routing and so that problem was solved. With a ready backend, we had much more time to work on the frontend.

The site works in IE > 7 and any relatively new Firefox and Chrome. It was never tested in IE6 because we didn’t have access to one. Finally, most visitors are engineering college students who are quite likely to use modern browsers.


For a website like Synapse, which has 3 level events, the navigation can be a make or break. I wasn’t so happy with last year’s attempt which had too much hover, and the users had to search three levels deep if they forgot where the event was.

An initial attempt at a better navigation was made using SpaceTree. It is a really good navigational tool, and significant effort was invested in trying to make it fit the Synapse event model. The plan was that on the Events landing page, the SpaceTree would be the main content, and clicking on a event, would open the event details in a modal dialog. But that just sucks. I wanted to remove as many click’s as possible. The next option was to shift the SpaceTree a bit to the left and fit the content to the right. But with the 1024px constraint, that wouldn’t work. Meanwhile I was facing some issues with the spacetree, it requires a special script to work in IE, was causing graphic glitches in a Chrome beta, and wasn’t behaving nicely in terms of firing events. The Javascript Visualization toolkit is really good, but it didn’t cross over well to navigation.

We decided to remove an entire level by showing the navigation in a modal dialog. So all the Technical events get shown together, all the Cultural together and so on. This still means two clicks to get anywhere, but gives users a very obvious heirarchy, while at the same time not requiring them to remember anything except the name and the category (which is usually quite obvious). The current representation is of course dependent on the theme, but I’ve to stick to a certain order in this article. Chronologically the theme plan came after the SpaceTree idea and before this one. We had two iterations even in the current situation. The first one was to push each navigation ‘card’ to the top left, over the green of the joker’s head. That would leave us with more space for content. But it clashed horribly, and was too small. Also our site is such that my cursor is much more likely to be to the right of the screen, so it went to the right.

The Theme

Agreeing on a design to represent the theme was the hardest part of the entire endeavour (the second hardest was getting it to work in Internet Explorer). The Synapse website has 4 main areas:

  • Landing
  • Events
  • Sponsors
  • Contact

Registration can usually be put in a separate window or per event. We had four characters also finalised.

  • Gabbar from Sholay
  • Amitabh Bacchan from ? ( yes I don’t know my Bollywood films )
  • King Leonidas from 300
  • The Joker from The Dark Knight

The first plan was to have a movie projector on the landing, with the Synapse logo embossed into it. Each navigation pane would be film-strip like. But that is a cliche cliche. I distinctly remember ideas involving, flowers and 4 coloured sarees. Then somebody stumbled upon Lucuma. Oh, by the way:

The secret to creativity is knowing how to hide your sources. — Albert Einstein

That was it, we had the motivation and the final vision. Merging the scenes from one to another was a very good idea. In addition, if you notice the Synapse website carefully, certain parts of the background are shown only while changing the page. It was a bit tricky to get jCarousel to play nicely with that, but I got it working in the end. The Tree to Joker transition remains my favourite part of the site.

That week of 25th-31st October, we had a 109 commits in total (out of the overall 154 till now). So the team did work their asses off.

The rest was pretty spartan. A very simple black and white theme. The top navigation font is Neucha. Incidentally, we use Sans Serif fonts all over, including the main copy, because we don’t have much to read, and dropping the serif means more ‘white’ space. The character on each page adds a distinctive look. The top edge has a frayed look, but the bottom edge doesn’t. This is because while top margin positioning works across all browsers, the same doesn’t hold for bottom. It varies a lot with screen resolution and browser version and none of us had that good an understanding of the box model, or the arsenal of tricks more seasoned web-devs have to make this work.

The little things

Clicking on any events takes you to a event page, where all the top links scroll, except ‘Home’, which will refresh the page. This is intentional. The hash tag and jCarousel do not play well together. jCarousel has problems with indexing the right spots in the element list. So a hashtag couldn’t be used. Leaving the landing page their would mean a delay or click to get to the main content. But reordering the landing page on all the event pages would break consistency. With caching the home click should be almost instantaneous. So it was a compromise, and one that we should plan for next time.

The sub-headings in events and contacts are generated with javascript. The actual thing is just some

s, but scrolling in that tiny area can become tedious. So a domready hook collects all the h2s and create’s ‘tabs’ out of them. jQuery is good for these kind of things.

The registration page tries to be nice. If you’ve already registered before, details like your name, and phone number get filled in automatically. For students inside the college this is instantaneous, and a major time-saver. Since more than half of our participation is from within college, this is a very good usability improvement.

The second usability issue in the registration form is quite subtle. If you enter the wrong password, focus is immediately drawn back to the password field. But if you focus on a different field again, it won’t pull you back the second time. This is because it is quite possible that I want to fix the username instead of the password, and always pulling focus to the password again wouldn’t allow that. So alert the user once, but give up after that. Of course, the values are double checked upon submission, so security is not compromised.

Finally by asking DA-IICT students for 9-digit IDs we can always contact them while ensuring uniqueness, while also auto-filling the institute name and removing the option for accomodation, ensuring that people are only shown what is required.

The horizontal partition puts a physical differentiation between common fields and per-event fields. In fact, we can even add custom fields for events which require them, by simply making entries in the events details and the page will automatically include them.

In summary, the Synapse website is a pretty good architecture, and quite well thought out. There are certain improvements that are visible in hindsight, but which we looked over inthat one week of crazy work. The result is quite stunning though.

Posted via email from nikhil's posterous

Semester 5

Its been ages since I’ve got a post up, but I have my excuses. I have been working on a static site for myself, self-hosted and with my own domain name. I thought I would only resume blogging once that was done, but it is going to take some more time. Now with December a week old, it is time for my customary brain dump about the entire semester. In many ways these posts are highlights of the semester according to me. The short version: It was busy.

Last time, it was summer and I was in GSoC euphoria, and since then I’ve had a couple of posts about it and KDE, but I left out all the human bits.

The fifth semester is an important stepping stone in DA-IICT. It is the first time that you are free to chose half of the courses depending on your interests. It meant I could give up Communications, which had always hit me hard when it came to grades. So I had Introduction to Algorithms, Embedded Hardware Design (EHD), Database Management Systems (DBMS), Computer Networks (CNS), Introduction to VLSI and Approaches to Science Fiction (SF).

EHD was a course which was very interesting and very boring. The interesting part was programming Atmel micro-controllers in C. I. Loved. It. We even made a wicked cool one-way chat that used two Atmel boards. Typing messages to the serial port on one computer, would send it to the board, which would Huffman encode it, send it across the SPI bus, where another board would decode it and send it to the second computer. The SPI bus can be swapped with any system for longer range communication, it was only that our board didn’t support it. The boring part was the second half, when we were programming FPGAs using Verilog. FPGAs are the kind of technology that tries to think too much. It also makes programming the simple things on them extremely convoluted, with pin assignments on the massive board and using the god-awful slow Xilinx ISE environment. Write to Run time is a crucial parameter of programmer happiness. When you can finish a large ice-cream scoop in the time it takes to burn changes to a board, something is wrong.

Speaking of ice-cream cones, for the first time ever, I bought an entire pack worth of ice-cream (Baskin Robbins) and ate it all. It was delicious! It was great. It just got a bit boring towards the end. The 24th was incidentally the coldest day of November in Gandhinagar, and at 1pm in the afternoon, I was shivering, it was raining and it was the middle of final exams. It’s good I wasn’t thinking about the probability of getting sick.

VLSI was my most challenging subject. The professor was top-notch, and I loved the course. The look at how ALUs and memory is made using CMOS gates — that was truly full-stack knowledge. It was calculating the delay that seemed really tough for first two exams, but by the third exam I had it down well and managed to get a 7/10 overall.

DBMS was a fiasco. I disliked the course, I disliked the teaching assistants, I disliked the boring stuff we had to do in the labs. CNS labs on the other hand were very interesting, we did a lot of Wireshark inspection and set up BGP/OSPF routers. Very hands-on. The lectures were another matter. I attended 3 out of the 40 odd that happen in a semester.Algorithms was pretty normal, some very interesting things like O(n) median finding in an unsorted array and dynamic programming is a wonderful technique for solving problems, although not easy to get your head around.

Which brings me to the final course, Science Fiction. It was brilliant! We watched influential movies from the last fifty years, and I plan to review all of them in another post. It gave me a chance to review Stephen Baxter, analyze time travel and opened my eyes to this whole idea of SF being influenced by the society in which it was written. We had a very questioning professor, who introduced all these ideas. For all my life I’ve read novels pretty cursorily. The deeper themes and clues were lost as I spread through them. But that course brought all these things out. I’ve learnt to appreciate writing — the subtlety of language, the thorough research, the names — everything has to come together to create that perfect book.

With that course, and Entelechy bringing out 3 editions in one semester, I’ve written tonnes of articles in those 4 months, and it has spurred a certain love of writing. I need to work more on my description, and emotion more though.

Football always proceeds in fits and starts at DA-IICT, and this semester was more of fits. First I got a nasty ankle sprain, there went two weeks. Then my new pair of studs/cleats tore. Fortunately, the showroom didn’t have a replacement, so they gave me better ones! Neck-deep in work, I also had to forgo the tournament in IIT Kanpur.

As October approaches, Synapse preparations start. After last year’s series of disasters with a bad looking website and a server fire during the actual fest, we needed to strike back. So check out this year’s website. In fact, a full post about its making seems to be in order. This was done in one week, with two very late nights and taking advantage of the superb back-end code from last year. It has reinforced my belief that for something to be successful and worth doing, that initial idea has to be top-notch, a vision that provides very strong motivation. A mediocre idea will often lead to lack of perseverance in the team. Also I shamelessly request all readers who are college students to take part in Apps Dreamer

There was Hackfest of course, and I’m going to this year too. With an extremely busy four months, I’ve realised that its time to start saying no. I had a lot of mandatory tasks plus some others I took on voluntarily, but it proved a bit too much. So I’ve been really relaxing this month. That doesn’t mean I’ve stopped programming or learning. It means that I don’t do too much and the moment I feel tired, I stop. Next semester will again have a few projects, and I’ll be attempting the GRE, so I need to recharge this month.

Overall, semester 5 was good. Not enough academic learning, but lots of non-academic learning, and very busy days. Something I don’t want to repeat again :) The weather all throughout was magnificent though. The rains decided that 4 months was too short a time, and continued almost till the beginning of November. That coupled with winter felt just great.

Posted via email from nikhil's posterous