GSoC 2023: A Tale of Summer, Code, and Learning
On this guest blog post, one of our GSoC contributors for this year, Akila Induranga, recounts his experience working with us on Kolibri’s EPUB renderer.
Since entering university, Google Summer of Code (GSoC) has been a cherished aspiration on my list. Inspired by past participants, I believed this dream would come true — and eventually it did. Join me on my GSoC ’23 journey, hoping to inspire future contributors.
Google Summer of Code is a global, online program focused on bringing new contributors into open source software development. GSoC contributors work with an open source organization on a 12+ week programming project under the guidance of mentors.
Learning Equality is a nonprofit organization dedicated to providing equitable learning opportunities enabled by technology to the 37% of the world who lack internet connectivity, particularly those living in underserved and remote areas of the globe. They focus on creating offline-first education technology to bridge the learning and digital gaps, thus building educational equity.
Their flagship product, Kolibri is an open-source ecosystem of products and tools designed specifically to provide learners and educators in communities with limited resources with the ability to teach and learn with technology but without the Internet. Kolibri is designed with the very global communities it benefits to directly meet diverse needs, and it has evolved exponentially over the years, thanks to the contributions of volunteers worldwide.
During the past summer, I got the opportunity to work with the Learning Equality team, under the guidance of mentors Marcella Maki and Radina Matic, to improve the accessibility of the Kolibri Learning Platform EPUB renderer
Problem statement
Kolibri offers a well integrated EPUB renderer for its users with smooth responsiveness, control over the text size, and few themes to choose from. The existing color themes include variations for both light and dark modes. However, those color themes are predetermined by the application and cannot be fine tuned as per individual user needs. My project for this summer of code was to design and implement a custom color picker component for the Kolibri EPUB renderer so that users can have their own custom color themes in the application.
Approaching the organization
When I was looking around the organizations from GSoC 2022, Learning Equality caught my interest at the first glance. I was passionate about educational software, and the problem Learning Equality is trying to address, which is bridging the digital divide in the communities, felt relevant to my context too. Therefore, I sent an email to them introducing myself, and asking for advice to begin with, as I was new to the open source world. They were super responsive to me, and sent me a list of resources about the contributor guidelines, past GSoC projects, and how to set up the development server in the local computer. The developer documentation was very intuitive and easy to follow. I got the server up and running on my local computer, and then started to look into issues in the Kolibri Github repository. I tried to come up with solutions for some issues there. As a result, I got one issue assigned to me and I got a PR merged to the Kolibri upstream which resolved the issue.
Preparing the proposal
After the accepted organizations for GSoC 2023 were announced by Google, I went through the projects list. I got interested in the front end development related project of ‘adding a custom text color picker for Kolibri EPUB renderer’, and expressed my interest through emails. I got invited to the Learning Equality Slack channel as a guest, where I was able to clarify more about the project ideas, suggest my own ideas and get feedback. I prepared a proposal a little early, and sent it to the mentors of the project for their feedback. We had a few revision rounds before submitting the proposal to Google. Even after the proposal submission, I continued contributing to the issues on Github. It was about time to receive the most awaited email, saying that my proposal got accepted to Google Summer of Code 2023 program.
Community bonding
After getting my proposal accepted, I was added to some other Slack channels of the Learning Equality community, and received a warm welcome from team members there. Also, I had the first virtual meeting with my mentors of the project, Radina and Marcella. We discussed the proposal and planned the work ahead.
GSoC provides the flexibility of extending the project from 12 weeks to 22 weeks upon the agreement between you, and your mentor. Due to my other commitments I had planned, I decided to extend my project to 14 weeks. My mentors were also supportive and agreed to that. In the community bonding period, I was engaging with the team on the Slack channels, and got familiarized with their communication methods, working culture, and coding practices to some extent. I also started to implement some of the features with the advice from the mentors. From there, it was code, code, code.
Code code code…
With the beginning of the coding period, me and my mentors scheduled weekly sync meetings to track the progress and get the blockers cleared. It was a bit challenging because we were in three different time zones, but we managed to agree on a timeslot somehow. I maintained a separate document to gather up the blockers to be discussed at the meetings, and to note down the suggestions I received.
Being organized is always helpful to manage a project of weeks.
First few tasks I had to complete were pretty simple. I started with implementing the dummy component parts for the front-end and got them refined with the mentors. Then I implemented the logic in the components to make them functional as needed. The main challenges I faced there was storing and accessing data in the browser storage. I designed the feature of adding a new theme to the EPUB renderer, first without the color picker component. It was a simple button to generate a random combination of text color and background color, and store the combination as an object in the browser storage.
Then I added the feature of applying the custom created theme to the EPUB renderer by clicking on the theme button. I directly used the already implemented setTheme function for that.
The next challenge was integrating a color picker as a step of creating a new theme. It took me a little time to select a suitable picker for the project. I tried several open source color pickers including Vuetify color picker, vue-color, coloris, and alwan. Finally we agreed to keep the alwan color picker because it was accessibility friendly and easy to navigate using the keyboard.
After getting the color picker integrated, the main features proposed were almost done, and the fine tuning was remaining. Since the project was focused on improving the accessibility, I frequently got reviews about the aria-labels for screen readers, and the focus management for keyboard navigation.
The most challenging part in the project was to make the focus management work, so that the keyboard navigating users would feel smooth user experience. I was doing a lot of research about implementing the focus transitions, but it was a bit hard to implement here, because I used two modal dialog boxes for the feature. After trying various attempts, and a lot of discussions with my mentors, I was finally able to implement the focus management of keyboard navigation to an acceptable level. It was really a proud moment.
As the project progressed, my mentors had suggested Kolibri design team to refine the UI of the EPUB renderer settings. I recieved the new design as a Figma document and I really liked the new design as it looked more modern. So I agreed to implement the new design in the EPUB renderer with the remaining time I had in my project. I could only implement the new design halfway before the coding period was over. However, I would love to work with Learning Equality in future to implement the rest of the new design as well.
Reviews
I had the continuous help and support from my mentors through Slack and the weekly sync meetings. Both my code, and the Kolibri build artifact produced by my code were reviewed and tested by the mentors before merging any code to the upstream. I had several comments on my pull requests, and I kept working to resolve the suggested changes. Mentor reviews really helped me to improve the readability of my code, as well as the accessibility of the feature I developed.
Learning experience
This was my first time contributing to an open-source project. I had a great learning experience throughout it. The accessibility aspect was the main area to focus on throughout the project. This project improves the accessibility of the Kolibri EPUB viewer for the users by letting them select preferred colors according to their visual needs when reading EPUB documents.
I got my skills improved in the following:
- Testing a UI for accessibility with a screen reader
- Implementing focus management of the UI elements for keyboard navigation
- Implementing aria-labels for the UI elements
Takeaways to future participants
If you have read through this far, and are willing to participate in a future Google Summer of Code, here are my key takeaways for you.
- Do your own research — It is true that GSoC introduces you to the open source world, and the open source community is always helpful and supportive. However, you only get all the help if you show that you are committed to the project and passionate to learn. So, always do some research and approach the community for help with your findings.
- Start early — You can find the GSoC timeline in their official website with all the deadlines mentioned. But it does not restrict you from engaging early with your preferred organizations. Starting communicating with the organization early, contributing to their Github repositories, and getting familiarized with their code base will help you a lot even to select a GSoC project.
- Communicate — It is always recommended to keep your mentors updated throughout the project, as they might suggest improvements and better ways of doing things. Even when selecting a project, and preparing the proposal, communicating with the organization will help you to submit a better refined version of your proposal.
Acknowledgements
I want to express my gratitude to Google for organizing the Google Summer of Code programme and giving me the opportunity to work with Learning Equality. I would like to thank my mentors Marcella Maki and Radina Matic for their guidance and support throughout the project. I would also like to thank the Kolibri team for their help and support offered on the Slack channel. Finally, I would like to thank my family, friends, and University of Moratuwa for their support and encouragement throughout the project.
