![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Outreachy - Modifying Expectations
Jan. 20th, 2022 03:33 pmHi everyone! In this blog, I will be talking about my project "Revamp web application to aggregate and distribute IRC meeting minutes and logs" as an Outreachy intern with the Fedora Community. I will be sharing the project updates and tasks progress I have done till now. I am currently in week 7 of my Outreachy Internship and I must say it’s going great. Every day is a new learning experience for me with lots of new implementations, goals, and tasks. This keeps me motivated and afresh with the project.
Once the community bonding period was over, My mentor and I started working on a detailed timeline and road map. In the first week, I worked on the landing page of the Mote project and its design and UI. I was trying to implement a calendar from scratch in Vanilla JS. Thankfully my mentor recommended I use an existing customizable calendar plugin called fullcalendar.io. Documentation for this plugin is well maintained and has been extremely helpful as I started implementing the backend. I used the calendar to fetch data of all the meetings that happened in the last month. Once the calendar page loads, a function is called to fetch data and render UI.
However, it will display the recent meetings fetched in the calendar as events of that particular date. I made two views – week and month. In the week view, it will display all the meetings week-wise in the current month. We also worked on the today button which will become active in the week view once you navigate to the current date. On clicking the meeting, it will redirect to the meeting details page that shows the minute. I adjusted the aspect ratio to widen the navbar controls to occupy the width taken up by the container for the calendar. But as it varied and changed according to the screen size, I had to do window reloading and set up the width so that the scrollbar gets removed and the calendar width is the same in all the screens. I also used bootstrap theming and font awesome to change the colors of the month, week, today, arrow buttons, and the meetings block. I set it according to the matching theme of the Fedora. Also when the calendar was being loaded, the meetings fetched used to display very late to which my mentor suggested to first render the empty calendar and then use the indeterminate spinner that is rendered by default when the modal is loaded up to be replaced or removed when the contents have arrived.
After the calendar implementation, I worked on the search bar wherein the dropdown I had to display the list of meetings fetched. It calls the function from the backend as we type the characters and displays results in the dropdown. By default, we see 5 meetings in the dropdown along with a ‘show more’ button which opens to the modal of the list of meetings that happened with details like date, time, and channel name. Then, I did various changes and modifications to the implementation of the search bar. For the display of meetings list in the drop-down, I limited the suggestions to just the most recent five results with a button to show more buttons with giving information on when these meetings took place like date and exact time and in which channel these meetings are present. I disabled the browser-induced search suggestions. Then I pointed the results to the meetings available locally with the current deployment of Mote and not the meetbot-raw site. I also placed the search bar outside the calendar above the cart. I made the button a submit element, so it'll be automatic and used and these suggestions trigger automatically when typed and not when I click on the button only. The search now acclimatizes itself to the newly entered text so the trigger should be made whenever the text elements in the search bar change. Then I induced delay which is very small, like a few hundreds of milliseconds so that it is not perceptible to the user and this method is called debouncing. Then I requested the backend after 3 or 4 characters has been typed only to induce the search results, for this I counted the number of characters in the field and only made a request if the string length is more than 2 or 3 characters in the search string function.
Then I sorted the end results where the latest meeting will come first on the list and the meetings which have happened before will come after that. Also, the requested return now doesn't show the occurrences of the same meeting and is sorted by date. Then I moved the search bar to the navbar, as the last element there beside the About link. The way the search operates stays the same and I changed only the position because the calendar was moved on by a bit and hence in a default view, we would actually have to scroll down a bit to see the calendar in its entirety which was not looking good. Then I instructed users in the search bar placeholder (in Search meeting logs) and enter four or more characters to start searching for the meeting. The text I typed is "Enter four or more characters to search" which is to ensure that the people are not left to imagine if the search functionality is working properly or not when they end up entering only two or three characters.
I changed the highlighted color corresponding to Bootstrap's Primary Blue and then I picked a lighter tint of Fedorable Blue color for adding that. I also sorted the search results which turn up in the modal in the reverse chronological order of their occurrences and now the recent meetings turn up first and the older meetings follow after that. I also changed the font style and font size of the meeting's name and added another class of that so that it overrides the CSS properties and more letters get shown up and I also corrected the alignment of the search bar with text, logo, and button. I also made the search bar disappear as it is not center-aligned and does not look nice in the restricted width view by changing the position of the collapse button to get everything to work. I also added the spinner so that the user gets to know the meetings are being loaded on searching and then inserted the text as "No meetings found" if the user doesn't type appropriate results. Overall now the search bar fulfills all its core functionalities.
I’m halfway done with my internship and I have learned a lot throughout and improved my frontend and JS skills as well. I am really grateful to my mentors Akashdeep Dhar and Francois Andrieu for their constant motivation and support as well as the Outreachy organizers for this awesome opportunity.
Thanks for taking out the time to read my blog!
Once the community bonding period was over, My mentor and I started working on a detailed timeline and road map. In the first week, I worked on the landing page of the Mote project and its design and UI. I was trying to implement a calendar from scratch in Vanilla JS. Thankfully my mentor recommended I use an existing customizable calendar plugin called fullcalendar.io. Documentation for this plugin is well maintained and has been extremely helpful as I started implementing the backend. I used the calendar to fetch data of all the meetings that happened in the last month. Once the calendar page loads, a function is called to fetch data and render UI.
However, it will display the recent meetings fetched in the calendar as events of that particular date. I made two views – week and month. In the week view, it will display all the meetings week-wise in the current month. We also worked on the today button which will become active in the week view once you navigate to the current date. On clicking the meeting, it will redirect to the meeting details page that shows the minute. I adjusted the aspect ratio to widen the navbar controls to occupy the width taken up by the container for the calendar. But as it varied and changed according to the screen size, I had to do window reloading and set up the width so that the scrollbar gets removed and the calendar width is the same in all the screens. I also used bootstrap theming and font awesome to change the colors of the month, week, today, arrow buttons, and the meetings block. I set it according to the matching theme of the Fedora. Also when the calendar was being loaded, the meetings fetched used to display very late to which my mentor suggested to first render the empty calendar and then use the indeterminate spinner that is rendered by default when the modal is loaded up to be replaced or removed when the contents have arrived.
After the calendar implementation, I worked on the search bar wherein the dropdown I had to display the list of meetings fetched. It calls the function from the backend as we type the characters and displays results in the dropdown. By default, we see 5 meetings in the dropdown along with a ‘show more’ button which opens to the modal of the list of meetings that happened with details like date, time, and channel name. Then, I did various changes and modifications to the implementation of the search bar. For the display of meetings list in the drop-down, I limited the suggestions to just the most recent five results with a button to show more buttons with giving information on when these meetings took place like date and exact time and in which channel these meetings are present. I disabled the browser-induced search suggestions. Then I pointed the results to the meetings available locally with the current deployment of Mote and not the meetbot-raw site. I also placed the search bar outside the calendar above the cart. I made the button a submit element, so it'll be automatic and used and these suggestions trigger automatically when typed and not when I click on the button only. The search now acclimatizes itself to the newly entered text so the trigger should be made whenever the text elements in the search bar change. Then I induced delay which is very small, like a few hundreds of milliseconds so that it is not perceptible to the user and this method is called debouncing. Then I requested the backend after 3 or 4 characters has been typed only to induce the search results, for this I counted the number of characters in the field and only made a request if the string length is more than 2 or 3 characters in the search string function.
Then I sorted the end results where the latest meeting will come first on the list and the meetings which have happened before will come after that. Also, the requested return now doesn't show the occurrences of the same meeting and is sorted by date. Then I moved the search bar to the navbar, as the last element there beside the About link. The way the search operates stays the same and I changed only the position because the calendar was moved on by a bit and hence in a default view, we would actually have to scroll down a bit to see the calendar in its entirety which was not looking good. Then I instructed users in the search bar placeholder (in Search meeting logs) and enter four or more characters to start searching for the meeting. The text I typed is "Enter four or more characters to search" which is to ensure that the people are not left to imagine if the search functionality is working properly or not when they end up entering only two or three characters.
I changed the highlighted color corresponding to Bootstrap's Primary Blue and then I picked a lighter tint of Fedorable Blue color for adding that. I also sorted the search results which turn up in the modal in the reverse chronological order of their occurrences and now the recent meetings turn up first and the older meetings follow after that. I also changed the font style and font size of the meeting's name and added another class of that so that it overrides the CSS properties and more letters get shown up and I also corrected the alignment of the search bar with text, logo, and button. I also made the search bar disappear as it is not center-aligned and does not look nice in the restricted width view by changing the position of the collapse button to get everything to work. I also added the spinner so that the user gets to know the meetings are being loaded on searching and then inserted the text as "No meetings found" if the user doesn't type appropriate results. Overall now the search bar fulfills all its core functionalities.
I’m halfway done with my internship and I have learned a lot throughout and improved my frontend and JS skills as well. I am really grateful to my mentors Akashdeep Dhar and Francois Andrieu for their constant motivation and support as well as the Outreachy organizers for this awesome opportunity.
Thanks for taking out the time to read my blog!
