Server Density Chrome Application
Written by matt
Get it here: Server Density Chrome Application.
This is my third Random Week with Boxed Ice and it was a blast to get to spend the week in London, but more importantly to get to meet all of the Boxed Ice team. Working remotely is a fantastic benefit and having a great team to work with makes it so much more productive and fun. Getting to meet everyone really gave me an appreciation for the variety of skills and backgrounds that are brought to together.
For this week’s project, I was planning on finishing up a Chrome application I had started previously (it’s now live on the Chrome Web Store). I felt pretty good about where I was as the application lets you click through to your Server Density dashboard and then it throws some very basic alerts using Chrome’s notification system. I am not a particularly skilled interface designer, but do feel like I have relatively good taste with regard to what I think is a good interface or not – and what I had was not!
Enter our new team member, Miguel Fatia. He is a very talented UI/UX designer and paired up with me to work on finishing out the Chrome application. This is what I love about working with a great team. Miguel not only made the application features all look good, but he also introduced many great ideas to make the overall application much better than I had envisioned or could have done on my own.
Hey Matt, I will hijack your post for a bit and introduce myself. Hi, my name is Miguel and I’m part designer, part geek and I love being a part of the Boxed Ice team. In the comming months I will be introducing some new and cool stuff. But today the spotlight belongs to Matt, with whom was a pleasure to work with. So lets hear it from him!
When first using the Chrome application, you will be prompted to enter in your account and credentials. This is the options page and has been styled brilliantly by Miguel. This used to be just a basic form, but is much better now and has a great addition of sounds that will play when a new alert is fired. A great example of something I would have not thought to add myself. Check out the sounds, they are pretty entertaining.
Sound design is still a young field in the web, but having an HTML5 field makes it quite easy to achieve. Initially the sounds were a dull component, a simple extra that made sense. Team interaction, and this is the great part in getting together, pushed the topic from Shelly roaring and the more I thought about it, the more funny and ice breaking I felt it would be to have unexpected sounds.
One challenge in communicating data between the options page, background task page and individual alerts was to share a consistent set of data between them all. This was accomplished by using the HTML5 Local Storage functionality. Since Chrome applications operate similarly as a site would, it too has it’s own 5MB segment of storage available and every process from it has access to the same set of data. Options data and active alerts are stored there and can be used for subsequent calls or notifications by all pages.
Another new feature we are making use of is the background pages which will keep checking for new alerts without any active page open. All of the logic for periodically checking for alerts, comparing to known alerts and looking for fixed alerts is contained in this page. When a new or fixed alert is detected, this background page will throw a new notification to the user.