**Profile Information**
Name: Angel Sharma
Github: [[https://github.com/fillingtothemomo}| fillingtothemomo]]
Gmail: rockingpenny4@gmail.com
Phabricator: [[https://phabricator.wikimedia.org/p/Rockingpenny4| Rockingpenny4]]
Gerrit: rockingpenny4
Location: Mathura, India
Time Zone: IST(UTC+5.30)
Working hours: 3:00 PM to 3:00 AM (IST)
**Synopsis**
//InlineComments (https://www.mediawiki.org/wiki/Extension:InlineComments) is a relatively new MediaWiki extension that provides a long-missing feature for MediaWiki: the ability to do inline annotation on pages, in the manner of Google Docs, Confluence and other content-management systems. //
The extension works fairly well but some improvements can be added like adding user mentions to ping them in the comments, making sidebar creation more neutral and displaying correct date/time on adding a new comment with reloading the page.
**Possible Mentor(s)**
Yaron Koren and Brian Wolff
**Have you contacted your mentors already?**
Yes
**Deliverables**
- Add correct display of username and date/time of posting, on comment creation - currently, these are only displayed correctly for comments created before the page was loaded (T355943)
This can be done by declaring a getCurrentTimestamp function in ApiAddAnnotation.php for comment creation and ApiAddReply.php for comment replies :
{F43352109}
rather than a separate API as that would lead to another request causing delay.
using the function , we can fetch the timestamp in sidenotes.js and makeComment.js :
{F43352666}
and appending it with the username in author.textContent :
{F43352685}
I have already implemented these features in my PRs listed below in past contributions
_____
- Add user mentions, i.e. selecting a user or users to "ping" about the current discussion by typing "@" and then selecting a username from the dropdown (T355942)
The InlineComments should support "@"-style user mentions. That means the following:
- If a user types "@" in a comment (either a new comment or a reply), then an alphanumeric character afterwards, an autocompletion dropdown should appear, letting the user select from the set of usernames on the wiki that match what the user has typed.
- If the user selects one of those usernames from the dropdown, the username should appear, highlighted or bolded in some way.
UI Mockup :
{F42648553}
- Once a comment is saved, the username(s) in that comment should still be highlighted or bolded when the comment is displayed.
UI Mockup :
{F42648549}
- Any users who are "mentioned" in an inline comment should get notified, via the Echo extension.
Source: https://www.mediawiki.org/wiki/Extension:Echo/Creating_a_new_notification_type
Using EchoEvent::create() we can create a new event class that defines general events, collects information about the related page, user and wiki and inserts them into the database.As part of the definition of the event we detail which users receive a
notification from this event. This is defined by the parameter 'user-locators' => array( ... ) , we can also use web or email notifications preferences. Using EchoPresentationModel we can create the model in which our notification will be presented by setting
several parameters like getIconType, getSubjectMessage etc. After selecting users to notify from the dropdown simply locate those users and trigger the notification event.
{F43360225}
This can be done in three main ways : an entirely custom solution, a solution involving a 3rd-party autocompletion JS library, or via the "@"-autocompletion feature in the DiscussionTools extension, which in turn relies on VisualEditor. If one were to go
with the third approach, it would mean that every textarea in InlineComments would in reality be a VisualEditor input; if that were done, it may make sense to use JS or CSS to hide the VE toolbar from users. (It would also mean that three other MW extensions w
would be required for the InlineComments user mentions feature to work fully: VisualEditor, DiscussionTools and Echo.)
_____
- Make sidebar creation more skin-neutral - currently, the "sidebar" in which comments are displayed is created on somewhat of a skin-by-skin basis; it would be good to have the code handle all skins in a standard way, via CSS and/or JavaScript (T355948)
Currently to render comments on the sidebar InlineComments has a default CSS file, but also custom CSS files for Vector, Vector 2022 and a few other skins.
{F43353719}
However, this might be faulty for other skins that are not handled by the CSS so either we could make
one css file for all skins which might lead to some duplicate code , or we could handle each skin differently based on different page width of elements and come up with a smart implementation using Javascript and some CSS.
_____
> **Timeline**
>
**Pre-GSOC**
Work on open issues on wikimedia phabricator and improve my skills and understanding of the mediawiki codebase , whilst still exploring the project codebase and gathering more information about features to be implemented during GSOC project. I have already contributed to various extensions like InlineComments, PageTriage, MobileFrontend, AdminLinks and WikiEduDashboard and learnt a lot from each PR made.
**Community Period**
| May 02, 2024 - May 27, 2024 | Get in touch with the mentors and familiarize myself with the community and codebase. I'll discuss potential ideas to solve the issues and improve the extension. Understand the architecture and identify relevant parts of the codebase for the issues.
**Coding Period**
| May 27, 2024 - June 03, 2024 | Discussing approaches with mentors and improving the date/time feature which I already have implemented pre-GSOC, I believe it could be refined even more and integrated seamlessly into the code as suggested by the mentors.
| June 03, 2024 - June 10, 2024| Work on the previous feature and test it for any bugs , whilst simultaneously updating documentation. Also, write the bi-weekly report.
| June 10, 2024 - June 17, 2024| Resolve code reviews promptly and provide punctual check-ins. Start working on making sidebar creation more skin-neutral and going through the custom css of different skins in order to understand the code and figure out a potential solution.
| June 17, 2024 - June 24, 2024| Research for implementations through CSS and/or Javascript and discussing with mentors to produce an optimized code that works with almost all skins. Write the bi-weekly report.
| June 24, 2024 - July 01, 2024| Finalise the code changes and test each skin with the solution to ensure uniformity and resolve code reviews, and document the code modifications.
| July 01, 2024 - July 08, 2024| Discuss new ideas and features for improving the extension with the mentors, and in case of no pending work, start researching implementations of user mentions and echo extension, prepare for mid-evaluation, and receive feedback from the mentors. Write bi-weekly report.
**Mid-Evaluation**
| July 08, 2024 - July 15, 2024| Work on feedback received from the evaluation and continue researching implementations for user mention feature and also the autocomplete feature such that user can select the required users from a drop-down menu on mentioning them.
| July 15, 2024 - July 22, 2024| Work on implementing one of the three proposed approaches after discussing with mentors and handling the case of anonymous users. Write bi-weekly report.
| July 22, 2024 - July 29, 2024| Implement the auto-complete feature from the drop-down and research on echo-extension implementation for notification handling.
| July 29, 2024 - August 05, 2024| Integrate notification with mentioned users and implementing the proposed UI, a mockup of which is described above. Write bi-weekly report.
| August 05, 2024 - August 12, 2024| Finalise the GSOC deliverables and work on bug-fixes, if any.
| August 12, 2024 - August 19, 2024| If completed early, start working on new features proposed during GSOC period. Write bi-weekly report.
| August 19, 2024 - August 26, 2024| Continue working on new features and prepare for final-evaluation as needed per the timeline.
| August 26, 2024 - September 9, 2024| * Buffer-period* for working on the new features and timeline might shift accordingly. Submit final blog report after GSOC completion.
**Final- Evaluation**
**Post-GSOC**
I am learning a lot by contributing to Wikimedia. Even after the GSoC period ends, I plan on contributing to this organization by adding to my past projects and working on open issues because of the familiarity of the technical stack and the new challenges that I am continually offered in the process.
Also, I would like to complete the future goals mentioned in my proposal. Having picked up many development skills, my primary focus would be to help the project and the community grow. I would also be interested in helping other people in getting started with their open-source journey and guide them in this fun process.
**Future Goals**
-Implement an edit feature for users' comments as it is something InlineComments lacks and will make it much more user-friendly.
-Suggest more changes and features during the GSOC period.
**Participation**
I am active on Email, Zulip, and Slack. I will use Phabricator and Gerrit for issue discussions and code reviews. I plan on regularly meeting with my mentor to discuss my progress and get feedback on my work. I can dedicate 30+ hours a week as I have no other commitments.
> **About Me**
>
**Education**
College: Indian Institute of Technology(IIT), Roorkee
Year of Study: 2nd year
Field of Study: Mathematics and Computing(Bachelors of Science)
**Skills**
I am a member of IMG- [[https://iitr.ac.in/Campus%20Life/Student%20Groups/Information%20Management%20Group.html| Information and Management Group]] of my college and we are responsible for handling the entire college's data , the [[https://iitr.ac.in/| Institute official website]] and Channeli - a one stop application for student and faculty's entire information ranging from placement stats and noticeboard to lost and found and complaints and grievances ; and various other projects. Hence , I have a lot of experience working on production level apps used my thousands of people and working with an amazing and collaborative team that makes a huge impact.
- Javascript ,HTML,CSS, Tailwind : Used vanilla JS in making projects like comic-book displaying website and basic games like flappy bird and space invaders and CSS for styling.
- Django, PHP: Making backend for various applications
- React JS , Vue JS: Used for frontend development in full stack projects
- Flutter, Java : Used for app development in Android Studio
- Docker
**How did you hear about this program?**
After getting into college, I learned about Google Summer of Code from my seniors, and some of them were selected for it and after talking with them, I looked at the program with greater interest.
**Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the program?**
No, my current semester ended in April last week, and I will have holidays for 2.5 months where I can commit all my focus to this project, and I have no other commitments.
**We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?**
I am **100% loyal to Wikimedia Foundation** and only plan on applying to Google Summer of Code with the Wikimedia Foundation.
**What does making this project happen mean to you?**
I have always been excited by the prospect of converting ideas into products with real-world impact and that is exactly what the Wikimedia Foundation does, producing free and open-source applications that impart learning to millions of people over the globe.
I am highly interested in this project, and contributing to Wikimedia has been a really fantastic learning experience with assistance from all mentors; each PR teaches me something new, and each feedback and code review enhances my coding skills and understanding of the project. Getting to work on this project will teach me production-level code structures and massively impact my learning.
> **Past Experience**
>
**Contributions to Wikimedia**
| Title | Link| Status|
| Add timestamp display to comment replies| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/InlineComments/+/1010852| Merged
| App timestamp display on comment creation| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/InlineComments/+/1010349| Merged
| ALRow: Add row search class| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/AdminLinks/+/1007973| Merged
| Fixes expand sections visibility on browser resize| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1011221|Merged
| Fixes DateControlSection component cut-off| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PageTriage/+/1011034| Merged
| Fixes date a11y issues| https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5687| Merged
| Fixes inconsistent highlight issue in navbar| https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5661| Merged
| Fixes toolbar falling off screen on zooming| https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PageTriage/+/1013680| Open
|refactors milestones to functional component| https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5601| Open
| renders dates for milestones in home tab| https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5581| Open
**Past Projects**
-[[https://github.com/sdswoc/DirecM| DirecM]]
Worked on a project on app development using Flutter and Arduino using infrared sensors for a wayfinding app for blind and visually
impaired people under an event organized by a technical club of our college.
-[[ https://github.com/fillingtothemomo/Autumn_assignment| ProTrack ]]
My first major React project.Made a full stack application for managing personal groups and projects using React JS and Django backend with
MySQL and Tailwind CSS for styling.
-[[https://github.com/amogh-babu-k-a/DRDO-APP-DEVELOPMENT/tree/DRDO_version2| DRDO sensor Malware]]
Worked on developing malware apps for DRDO, India, in a research internship under Dr. Sateesh K. Peddoju
**Other open-source contributions**
-[[https://github.com/IMGIITRoorkee/omniport-docker| Omniport-Docker]]
Official docker distribution of Omniport - one true portal for every educational institute.
-[[https://github.com/CircuitVerse/CircuitVerse/pulls/fillingtothemomo| Circuitverse]]
CircuitVerse is a free, open-source platform that allows users to construct digital logic circuits online.