first pull request!

I’m a bit late to posting this, but I recently joined the latest group of OPW interns. I’m excited to be part of the OSS community and am looking forward to do my part to contribute!

My OPW project is to work on front-end design and development for Hyperkitty. One of the interesting things about the OPW application process is that you have to make an initial contribution to the project that you want to work on. After chatting with Máirín, I learned that Hyperkitty’s front-end is based on Twitter’s Bootstrap. We decided that, as my initial contribution, I could work on making sure that Hyperkitty was taking full advantage of all of its Bootstrap features. Máirín had already done a lot of work redesigning Hyperkitty’s pages and was in the middle of transitioning from visual mockups to front-end implementation. Two of her mockups were already implemented (the list of lists page and the list overview page). My task was to take the list overview page and give it a closer examination, making sure it was doing things the ‘Bootstrap-way’.

I ended up doing a lot of changes to the pages, but most of them were under the hood. The biggest change was probably migrating the front-end from Bootstrap v2.2 to v3. I also tried to clean up the css and leverage as much of Bootstrap’s built-in css classes and javascript modules as possible. I also switched some of the graphics, opting for using font icons instead of graphics since I find that font icons are much flexible in terms of scaling and styling. As is often the case with front-end stuff, what sounds like seemingly simple changes on the surface can often cause big changes in the visual layout, so there was a lot of tweaking when I was getting things cleaned up.

I submitted my initial contribution as a working branch off of a github repo that I forked from the main Hyperkitty repo. One of the first tasks I had to do once I started my internship was to figure out how to integrate my submission into the main repo. I quickly realized that, between the time I created the branch (back in October) and when I started the internship (about 1.5 weeks ago), there had been lots of changes to the main repo, so even though I created a Github pull request off my initial branch, that wasn’t quite going to cut it.

After a few days of wrapping my head around git and learning about rebasing/merging, I finally figured things out and am happy to announce that I’ve done my first proper pull request! Of course, I still have to wait for it to actually be approved and integrated into the main branch, but I’m hopeful that things will work out much better than when I first submitted the pull request. I’ve also had some more time to make some more code changes, so I was able to flush out some more layout issues and to also do a cursory update to some of the other Hyperkitty pages (to make them compliant with Bootstrap v3). This way at least the layout of these other pages won’t be broken when my branch gets integrated into the main branch.

Next up is to look at doing front-end implementations for Máirín’s two other mockups (the user profile page and the categories/tags page). These mockups are a complete redesign from what they look like now, so it’ll fun to tackle the front-end implementation (almost) from scratch. Once those two pages are done, I’ll start looking at making the pages responsive. Right now, the pages I’ve done are designed for screens wider than 1200px and don’t scale well with smaller screens. Bootstrap provides a lot of infrastructure to make things responsive, so hopefully this will be relatively straightforward once I get to that part.