ElmahR v0.6
ElmahR reached v0.6, and a lot of improvements happened since previous version, most of them on the UI. Finally we had time to concentrate on the visual aspects of the dashboard, trying to come up with something more reactive, better at bringing the right information and at scaling along with the number of monitored applications. This last issue has been worrying us the most, it's not easy to accomodate the potentially quite big volume of info that ElmahR handles. We let ourselves be inspired by Twitter web site user experience, and we took advantage of the Twitter bootstrap framework to build a responsive layout. It is a very interesting framework, it allowed us to greatly improve how the dashboard looks like, and now we have better support of different form factors and browsers. Now IE9 is well supported too, while we still have problems with older versions, we'll try to target IE7 and IE8 in next iterations. Twitter bootstrap is quite simple, but it can also help deliver sophisticated UIs and to do that it can get pretty complex. We cannot really say we understood everything of it, but we also wanted to deliver soon, so we found a quite good and quick compromise analyzing a sample application and modifying it to our needs. You might notice it in the css files, one of them is still quite 'in progress' and it also contains stuff coming from the original sample and that we do not really use, but it's like that because we'll try to understand more of it in the next days.
Should you try the demo web site, you will notice that we have a responsive layout, normally composed of 3 columns which collapse to just 1 when the available width goes below a certain limit, as it happens on a phone. The first columns is composed by summary boxes. The first box shows overall info like the total number of errors, info about the latest error and the name of the application which raised it. The remaining boxes are similar, but specific for each monitored application. Those app-specific boxes are sortable by dragging and dropping them, they can be expanded to show the errors belonging to each of them, and the relative error feeds can be paused or resumed. The second column is a global feed where all the errors are stacked up, the newest ones being on the top, this column let the user know about the latest errors occurred at a glance. Each error is expandable to see full details in a popup, which is disabled when the dashboard runs on small form factors because we're still looking for a better way to show details on those kind of devices. The third column is intended to host additional pieces, so far we built 2 statistical 'plugins' which should be considered samples about how to build such extensions, this area still needs more exploration but it's working quite fine and could be already leveraged to augment the info ElmahR gives to its users.
With this release we'll leave the UI alone for a while, and the efforts will move to the server side. There are a lot of interesting SignalR features that could be used to improve ElmahR efficiency, the most notable being 'groups', so part of the energies will be allocated to further investigation on this amazing library. The new UI introduced a few new usage 'idioms' that would take advantage of some server side improvements, like user profiling and smarter errors buffering, so these will be the areas where most of the work will be done in the next few weeks. I'll also try to blog more about the work process and the concrete code, I admit I'd like to have ElmahR evolve in a way that people would consider it a 'good sample app' for libraries like ELMAH, SignalR or Knockoutjs. I cannot say when (and if) this goal will be reached, if some of you guys out there want to help me in this effort (even simple advices or suggestions are very welcomed) I'd be glad to try with you :)