When the web app loads, the server sends out all the HTML files stored at the backend. A better way would be to render content only when it's needed. I worked on this project which involved migrating the HTML files from the backend to the frontend using the Handlebars templates. This allowed the web app to be more dynamic and probably save some bandwidth. This involved a series of pull requests:
- user_status: Migrate to handlebars.
- about_zulip: Migrate to handlebars.
- message_history: Migrate to handlebars.
- deprcation_notice: Migrate to handlebars.
- lightbox_overlay: Migrate to handlebars.
Apart from this, I also ported some other parts of the web app to load dynamically:
The Zulip web app uses Bootstrap 2 which is kinda old. One issue with that was that the modals wouldn't work well when a user rapidly clicked the button invoking the modal. This would cause the modal to not open again after subsequent clicks and would require a refresh to fix.
The recently-added muting users feature missed one thing - muting deactivated users. Although the users are deactivated, muting them helps in case they are reactivated.
Zulip provides a lot of keyboard shortcuts (Zulip also supports Vim bindings!). However, those shortcuts can interfere while a modal is present. Disabling them in that case makes sense.
Zulip has a great poll feature wherein users can vote their choice. A bug in the rendering of the poll widget caused it to no longer work when a user changed the view to All messages.
Zulip also has a great time widget feature, wherein a user can pick a time and others get to see it in their local timezones. The original formatting of the time string was the ISO standard one, but that's pretty unreadable at a glance. I changed to a more human-readable format. It did get reverted though since the new formatting messed with the markdown tables.
A small improvement where a user can click on their emoji status to bring up the status modal to change the status.
- subs: Update sub object with additional properties in update_* functions.
- user_deactivation: Move modal_parent one level up in confirm_dialog.
- user_status: Fix styling of modal.
- stream_ui: Fix subscription button out of sync.
As noted above, the older Bootstrap version was causing problems. We set out on a long-term project of just moving on from Bootstrap and instead have modular libraries. In this, I worked on migrating the modal infrastructure from Bootstrap to a separate library, Micromodal.
Zulip uses tornado to manage requests at scale. Unfortunately, we got stuck on version 4.5 which is 2 years old, and missed out on all the new improvements. The upgrade was more involved since tornado migrated from their event loop to Python's asyncio loop. This changed things quite a bit for us since we customized some internal functions. This helped me learn more about asynchronous programming in general.
Zulip provides extensive searching support. However, one thing it's missing was searching by date.
- stream_edit: Disable add button when input field is empty.
- minor: Add z-index to message_time class.
- node_tests: Run tests parallelly.
I'm immensely grateful to my mentors, the Zulip community, and Google for giving me such a wonderful opportunity. I learned a lot this past summer. From reading code to writing code to collaborating and debugging. It's great to see your code being used in real-world software.
I will continue contributing to Zulip and helping out new contributors spreading the joy of open source.