User login

Weekly Report - 10/01/14

13

Jan

2014

This week I wanted to dedicate some time to cleaning up the fragmented amp-web interface to improve the consistency of CSS and markup across the site, and to remove unnecessary JS libraries, in the process determining which libraries best suit our purposes in cases where features overlap.

As a first step I included Bootstrap's CSS globally and rewrote the rest of the global stylesheet around it, restructuring hacky CSS that relied on (inline) markup. I would prefer to include only the Normalize reset and Bootstrap's class-based CSS rather than the base CSS that styles other elements, which I might investigate at some point, but for now everything works fairly well. Including Bootstrap globally broke the Matrix, whose CSS definitions overlapped with Bootstrap's (so I fixed this temporarily by renaming the affected classes).

So after breaking the matrix, I spent a lot of time cleaning it up (albeit mostly because I wasn't aware it existed in the first place). The Matrix used jQuery UI to display tooltip-style popups, which I replaced with a similar feature (popovers) in Boostrap. This took a bit of time and more rewriting than I'd expected as the JS for instantiating each is very different (particularly as the popovers are intended to appear on click rather than on mouseover), but it worked eventually and I managed to streamline some of the Matrix code in the process. I also replaced the matrix's jQuery UI tabs with custom ones, and that allowed me to remove jQuery UI and its CSS, the JS library cssSandpaper (which had been used for backwards compatibility that wasn't really relevant), and its dependency libaries cssQuery, EventHelpers, sylvester and textShadow.

I added a CSS hack to fix graphical glitches that were sometimes produced when rendering rotated text (the matrix headers). It seemed to only occur on Voodoo, but as well as preventing the flickering issue, the fix also looks to have improved legibility on all platforms.

Finally I spent some time integrating the traceroute map with the latest changes and updated it to use real data. It was interesting to see what a difference this made to the summary view, whose highly aggregated data is no longer useful for representing unique paths or for being able to see where paths change. Will have to look at how to best address this next.