Discussion Forum Refactor, VPAT & WebSocket Integration

The project was an upgrade to the Discussion Forum module of the Submitty web application. The Discussion Forum allows students in a course to discuss their coursework, allowing image upload, links and code embed. My work over the summer made the Discussion Forum more user friendly in terms of accessibility and speed of using the Forum

I am Anubhav Singh, an undergraduate student from NSEC, Kolkata, as part of Google Summer of Code.

This project was mentored by - Barb Cutler, Andrew Aikens and Shail. The project had constant guidance from Matt Peveler .

Contributions

33 commits Commits

1. Forum Refactor Templates

In this task, I was responsible for utilising the Twig template engine all over the Forum, in sync with the rest of Submitty code.

Besides bringing in the Twig template engine, I also separated out the Forum specific CSS and JS from the other files, and moved all (nearly) inline CSS and JS to separate files.

During working on the above task, I got into discussion with Barb and Andrew about using Markdown on the Forum posts. It was decided to replace the previous formatting system for the posts and I introduced Markdown rendering for posts in #3774. However, we soon ran into alerts from several users who were suddenly having their posts rendered as Markdown. Hence we came up with the following change -

2. Solving VPAT issues

A very exciting part of working on Submitty for me was to discover the depth of making websites accessible. Working on the VPAT introduced me to tools I had not known to exist such as the WAVE and ChromeVox (don’t install it during a meeting). I made the following commits for the VPAT issues -

Some of the fixes to VPAT were covered in #3905.

3. AJAXify Forum & WebSocket Integration

Probably one of the most exciting part of my GSoC proposal for Submitty, and one task I absolutely loved working. AJAXifying the Forum fell into place slowly and steadily. It was for a simple and sort of old issue that I first worked on bringing in AJAX -

This made the Forum threads navigation much faster, and lightweight now that we were no longer loading the entire page for every change in thread, hence it became possible to quickly click around on thread list and view all the interesting ones.

The next step came in the form of -

In this task, instead of just showing the applied Filters in the Forum bar, we went a step ahead and removed the Filter pop-up entirely, and created a sub-bar in the Forum which gets active only when any Filter has been applied. The motivation was to replicate the filter systems used in shopping websites like Amazon!

The above changes made it very desirable to have an entire no-reloads experience of the Forum, which would allow for real-time fetching of updates to the threads (and possibly pave way for push notifications). Late in July, when Barb and Andrew asked me to work on something which I was interested in, I came up with a few ideas and it was decided to introduce a WebSocket to the Discussion Forum!

The above PR when merged would enable a WebSocket server on Submitty (not limited to Forum, course-wide available). This socket server would allow real-time updates and notifications to be pushed to the users. I am expecting a large benefit that can be drawn from having a WebSocket push server in future for Submitty.

4. Miscellaneous

Apart from the above three major parts, I solved a few bugs here and there. the one bug I found most interesting and typical to solve was -

What was interesting about this bug was that it was about failing to display an error message when there was an error. The bug was evasive and it took a nearly a week to figure out how to replicate it reliably. Solving this bug was more of a help to the developers on the Forum than to the regular user.

I was also found complaining about the Hide/Show Replies feature on the Forum which resulted in -

And the sad side of it all, I could not get the following completed despite spending a good couple of days on it and reading up so much about JavaScript time that I gallantly preached about it to my juniors at college -

Alas, the students will keep making excuses about different Timezones.

Working with e2e tests using Selenium was new to me, and with continuous support from Andrew I was able to learn about it enough to update the tests as I made changes to the way the Forum was interacted with.

Future Scope of Work

I believe my work on the WebSocket opens up new avenues for not just the Discussion Forum but also for the rest of Submitty. It allows the possibility of making a lot of existing features use the benefit of real time and to make new features which take benefit of it. I would look forward to seeing the following in Submitty in future -

Acknowledgments

I had an enriching and exciting summer of 2019, working on Submitty under the Google Summer of Code program. I was glad to be mentored by Barb, Andrew (thanks for going through all my PRs!) and Shail (who was an important source of issues regarding the Forum throughout). I express my sincere thanks to all students who worked on Submitty as part of RCOS, and my peers working as part of GSoC.

I extended gratitude to Saketh, Han and Drumil whose comments/reviews helped me in a number of my PRs.

GSoC with Submitty was a warm and unforgettable experience for me. Every time I talk of Open Source, Submitty will be remembered fondly.