How my GSoC project is going

After writing a lot about the openSUSE Conference 2016, it is time to write about how my GSoC project is going.

What I have done

As I explained in my first post, my project main objective is to improve the schedule. So, in this first part I focused on the public schedule, which includes the schedule itself and the all events section.

Schedule

Before explaining what I did, I’ll show you how the schedule used to be:

Well, maybe you think that it was not that bad, but look what happened in a mobile phone:

And this is how it looks now in the mobile phone:

Mobile phone

 

And for tablets and big screens:

Schedule for tablets

Schedule for big screens

I think that the changes are really apparent. We decided to turn the schedule, having the times at the top, to use the space more efficiently. We looked for a mobile friendly solution for the schedule. At the beginning I wanted to use horizontal scroll, but my mentor made me realise that it is not very common and consequently most people wouldn’t understand it. So at the end I used a bootstrap carousel in which the interval of time that appear in every item of it is smaller when smaller is the device screen. I think that this is probably the only responsible option for a schedule, apart from using horizontal scroll, and it works pretty well. I also changed the tabs by a selector that fits all screen sizes and that is also better when the conference is too long.

The schedule height is at least 600px, as more devices are higher or equal to 600px, so that way we use most of the space. It was also important that every row and column had the same size. Regarding rows, it was very disconcerting that the carousel changed its size when clicking next. To keep all the rows with the same height I had to short the text. At the beginning I tried to do it truncating the title after a fixed number of characters, but I didn’t like that I wasted a lot of space, sometimes the title was too short or there was a lot of free space. At the end I used css to limit the title to a number of columns that depends on the the available height. In the case of columns, the fact that every time cell had a different size was what I hated the most of the old schedule. It was confusing, short events with a long title had more space than longer ones with a shorter title. Now the size of an event gives to a cue of how long it is, and I think that this is one of the main purposes of an schedule. The picture of the speaker is also dynamically adapted to the free space that there is left after adapting the number of lines and the cells height.

All events section

I also changed the all events section of the public schedule, although the pull request is still open: https://github.com/openSUSE/osem/pull/1032 But I think that we will be able to merge it next week. It used to be just an unordered list with all confirmed events:

Now, the events are ordered by date and time and it is also included at the end a section of confirmed events which are not yet scheduled . The event boxes also include other useful information such as the start and end time, the room, the track and the speaker picture. I think it looks really nice:

As you can see, I also added a selector with the dates at the top in which dates with no events are in grey to indicate it, so that way we provide an overview of the dates of the conference and reaching a concrete date is much faster. I’ve also added a button to go up in every date to make it easier to go up when there are many events.

Open the schedule in the current date

Another important feature, which I am pretty sure that people attending a conference will thank, is that the schedule is open in the current day and time. I think that this is very important taking into account that we are using a carousel and that in the mobile phone, which is the device that more likely people use when attending a conference to check the schedule, only one hour is rendered per carousel item. That means that otherwise we would have to click next repeatedly to reach the current time, specially when the day is almost finishing. Also, the all events section is open in the current day. Here it is not that important to go to the current time, as you just have to do scroll to find it and I implemented it and the code is quite complex.

Taking background colour into account

The track label used the track color for the background. It was always used white text for the name of the track and for some colors that made the name difficult or impossible to read. Now, the text is black or white depending on what of them provides a better readability. You can see the difference in the following images, where the text is the hexadecimal color of the background.

Old tracks

New tracks

Style

I have hamlfy all views related to the schedule that were not already written in haml.

I also moved the all events view to a different controller method as that view was getting too complicated due to being together with the schedule.

 

What I have learned so far and things I liked

I have decided to put together the things I liked with the things I’ve learnt because what I like the most is that I am learning a lot of things. One of the best things of working at openSUSE is that I have the chance to work with a lot of intelligent people that come up with amazing ideas. That’s why I like the correction that my mentors and other people working on OSEM make me, it is the best way to learn. I also like that my mentors always help me when I have doubts, sending me links to useful information so that I can find a solution. Another thing I really appreciate is that I can always give my opinion and that everybody opinion is taken into account to decide the final design or implementation. And because of that I also loved all the things I’ve done, and to be honest now that I am putting all the screenshots together for the post I like them even more 😉

Regarding the things I’ve learned, the part where I feel I have improved more is on the use of git. When I started working on OSEM I spent more time fighting with git than working on the project, and I feel quite comfortable using it now. It was also the first time I used Rubocop and at the beginning I didn’t understand why it didn’t like any code I wrote. But I’ve got used to it, I’ve also installed a Rubocop plugin for atom and now I like that it corrects my style mistakes. Tests were also new for me. I’ve already added or fixed few test but I think there are still things I have to learn and I think I’ll have the chance to do so in the last part of GSoC. I hadn’t used haml before neither and although learning it was easy I didn’t like as I much as I like it now at the beginning. Installing an atom plugin that colors haml made the difference, it is much easy to read it if it is colored.

And of course I’ve also learnt many things regarding Ruby on Rails too. The first one I remember is that I found out that count, length and size methods don’t do the same thing. Regarding Bootstrap, I’ve learnt a lot of things too, such as what panels are.

 

Challenges I experienced

When working on the schedule I found a little bit frustrating that we spent a lot of time trying to decide what the best design was, so I felt I was going much slowlier than I had expected and I sometimes worked on things that at the end we decided that we didn’t like. Although seeing how wonderful the schedule looks like I am pretty sure that it was worthwhile.

Sometimes I feel a little bit disappointed when I have to throw away something in which I’ve spent a lot of time, but that remembers to what my drawing teacher told me when I was leaning painting:

If you really want to learn painting your objective can not be to decor your house with your paintings. You can not fall in love with your drawings, they are just exercises so you have to throw them away and when you learn then you will be able to decor your house.

So, that is the same, when I throw something away I keep what I learnt and at the end the final result is much better 🙂 But it is still hard throwing things haha.

 

What’s next?

Currently I am working on allowing to have multiples schedules in the backend before deciding which of them to use. For that I’ve already introduce new models and associations. The following schema illustrate it (it is not a schema I did for the blog, I like to look at it when working on that, it helps me not to get lost with the relations):

There are still many things to do before finishing it. Probably the most challenging will be merging it, as there are few pull request quite big that interfere a little bit. I’ll try to separate features in different branches if it is possible with the objective of having less files to look at the same time when merging.

The next thing I am going to start with is the admin interface for the schedule backend: integrate it and make it more usable. I am going to show you how it looks like now, so you will be anxious to see my post with the changes haha.

 

To finish the post I would like to thank my mentors the time they spend reviewing my work, giving me support and solving my doubts. 🙂