Git the Web Forward

Goals and Purpose

The purpose of this site is to help the W3C manage the work done on its specs by many scattered contributors. The audience is formed of very savvy web developers who are helping the push the web forward however best they can.

A secondary audience might be the media, if any reporter covering the state of the web wants to delve into such granular data as this. Another secondary audience is, of course, the CS-E12 staff who are grading this work.

My goal while working on this project was to bring an existing data visualization (which I had created with Zona Kostic and John Greeley) to the next level - to reach a more user-friendly and flexible CSS-oriented state.

Implementation

The heart of the website is the function component - the Dashboard. However, for the purposes of this project, its home page is an introduction to that Dashboard, and we have supporting pages consisting of this report (which you are now reading) and also some supplementary notes.

To obtain the data, I had help from W3Cers, who used node.js with the GitHub and CanIUse APIs to create JSON files for me.

To process the data and create the main visualizations which are our content, my CS-171 class team, Zona Kostic and John Greeley and I, used the amazing d3.js library developed by Mike Bostock.

I then, on behalf of the CS-E12 project, revised the design of the dashboard using CSS and various jQuery libraries. For details about this stage, please view the CS-E12 Project Notes.

I will note here that one of the two CSS pages I authored does not validate using W3C's service, as it is mainly used to set SVG properties. However, the layout-oriented CSS page does validate, as does the HTML.

Future Directions

This is such an exciting project for me, I have many many ideas for how it can be expanded. Some have to do with the server side and the data - how can we have this page automatically get new data, and how better can the data be formatted for our visualization needs (also, we are just missing some data, like commits for the test suites, which is important to get in there). The code processing the data definitely needs more work - there is even some data that we already have that is not captured properly by our processing and so is not included on the Dashboard. In fact, the better that I was able to make the interface, thanks to this final project, the more I can identify where our actual data processing seems off!

Other ideas have to do with the dashboard itself - it would be fun to add a force-directed layout of how contributors are connected, as W3C requested, and to add an option to view timeline data with the various specs being differentiated rather the types of work.

As for lessons learned - I learned that jQuery libraries are indeed super useful, super timesavers. Maybe we don't know how elegant and efficient the code is underneath, but life is short and these libraries get the job done. Thank you, CS-E12, for opening my eyes.

There is still so much I wish I could have accomplished within the timeframe (like media queries to adjust layout most optimally, and offering the user the ability to resize the graphs (but that would have required more code to adjust the various graphs' own layout calculations as well)). Perhaps I should have created a new, fully responsive design / progressive enhancement page, and then fit the existing graphics into it, rather than continue to build on the existing website. Like that, perhaps I would have been better able to focus on creating the end-user's cross-browser experience, rather than continuing to focus on improving the visualizations themselves.

However, within this iteration of the project, I am especially pleased by the details pane at the farthest right. It is important to be able to drill down to the details from the dashboard, and I find that presentation of the details to be the most usable and most readable approach, even if it takes up permanent screen real estate (as compared to using tooltips). And even if it still needs some functional work - changing the timeframe of the data does not update this panel, even though it logically should.

It was great to accomplish so much as a team in the first pass (working with W3C and with CS-171 classmates Zona Kostic and John Greeley), and very satisfying to continue to work on it for CS-E12, applying the technologies I learned in this class. I am so grateful that you allowed me to continue to work on it for this project. Before this semester, I had never made even one web page, and now look at what I can do! Thank you, CS-E12!