Screenshot of PersonalPVT homepage

PersonalPVT (site; code) is a Web application for doing psychomotor vigilance testing. The actual test is extremely simple: numbers pop up on the screen and you hit the spacebar (or mouse button) in response. The speed of your responses can indicate your level of sleep deprivation. Implementing a PVT tool is easy; providing meaningful views into the resulting data is harder. I spent about 1 month on this project, working mostly on the weekends.

For those interested in an alternative PVT application more oriented towards researchers performing studies, there’s PC-PVT. I have used PC-PVT and it’s fine but it’s not designed for individuals to easily get started with — for one thing, you need to install the MATLAB runtime to use it. Therefore, I decided to build my own tool, focused more on individuals gathering data about themselves.

From a technical perspective, PersonalPVT is interesting to me because it’s a 100% client-side application; the server only serves static content. This is convenient because static files can easily be hosted for free using Github Pages. It’s also really cool, because it means the application has more fundamental similarities to something like a Java app(let) than to a traditional Web site.

I guess some people might disagree, but client-side used to be a nightmare for Web developers. A 100% client-side application would have been a perverse sort of punishment, not a project requirement. But with the advent of client-side Javascript MVC frameworks, a 100% client-side application is conceivable and even easier than server-side MVC.

There are a lot of great client-side Web frameworks, but I have been really interested in trying out AngularJS, so I built PersonalPVT with it. I know some people have trouble with the terms or concepts in Angular, but they seem to click with me.

The project wasn’t big enough that I could really feel the benefits of Angular’s vaunted testability or run into the view rendering/updating slowness that I have heard about, so I can’t comment about using AngularJS for very large projects. For a webapp this size, though, I think it’s the best framework available today, especially if you use ui-router to handle the routing instead of $route.

Authentication is still a problem for client-side applications because it basically requires a shared (i.e. server-side) database to store usernames, password hashes, and session tokens. Typically Javascript applications will use HTTP requests to communicate with an auth DB. I got around this by using the browser’s local storage to save settings and historical PVT data, which removes the need for any authentication. This approach matches really well with the idea of the 100% client-side program execution, but it also means you can’t share your data across browsers, which can suck.

Finally, the charts in the application use Chart.js, but if I were to do it again, I would probably use NVD3. Although Chart.js works well at what it does, it lacks useful features like allowing different datasets to have different vertical scales, or allowing you to turn off horizontal scale labels but not vertical scale labels.