Page MenuHomePhabricator

GSoC 2021 Proposal : Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia Adventure
Closed, DeclinedPublic

Description

Profile Information

Name : Gauransh Dingwani
IRC nickname on Freenode : Gauransh
Web Profile : Github profile
Resume (optional) : Resume
Location (country or state) : India(UTC+5:30)
Typical working hours (include your timezone) : 10 AM - 2 AM (UTC+5.30)

Synopsis

Project Idea : Develop a UserScript/Gadget tutorial on MediaWiki.org similar the Wikipedia:The_Wikipedia_Adventure

  • User scripts are javascript programs written by users to modify their interaction with pages while using Wikimedia.
  • The project is about creating a guided adventure tour on MediaWiki to give users insight on "How to create user script on Wikimedia projects."
  • Wikimedia provides Mediawiki's JS modules, Mediawiki's API's, OOUI that allows high customization of the wiki pages. The adventure will be designed like The Wikipedia Adventure, which will have 3-4 missions.
    • Mission 1: Basic Intro to deploying user scripts
    • Mission 2: Writing user scripts using MediaWiki's JS module
    • Mission 3: Writing user scripts using MediaWiki API
    • Mission 4: Writing user scripts using OOUI (Optional)
  • I have been an active member of the community and have contributed to the Wikimedia foundation's other sister projects. After the GSoC project ideas announcement, I was deeply interested in the project mentioned above, and I have also completed microtasks relevant to the project.

Possible Mentor(s)

  1. @Jayprakash12345
  2. @KCVelaga
  3. @APerson

I am in regular touch with them via Zulip chat.

Idea Implementation

  • The project will be an adventure tour containing 4 interdependent missions explaining the use and purpose of user scripts.
  • Each mission's design and implementation will be similar to the missions of The Wikipedia Adventure to maintain consistency across the media wiki ecosystem.
  • The 4 missions all together will be suffice for users to deploy their own user scripts.
The flow of each mission will be a tour similar to microtask1.mp4. And is described in brief as follows:
The points listed under each mission correspond to unique steps of the tour.
  • Mission 1:
    1. Introduction to User script in general.
    2. Navigate to the Special:MyPage/common.js file and describe its use (JS Code written here is applied to all pages).
    3. Instruct the user to edit the file.
    4. Provide users with basic user scripts examples within the tour step, with a copy icon to copy the code to clipboard.
    5. Instruct users to preview the changes.
    6. Instruct users to publish the changes.
    7. Congratulate the user for successfully deploying the first user script and provide a link to navigate to “User:Example/vector.js “ page.
    8. Describe the Special:MyPage/vector.js file and its use(JS Code written here is applied to a particular skin).
    9. Optional step to learn more about skins in mediawiki or end tour.
    10. If the user chooses to learn more about skins, then navigate to the Appearances page where user can preview different skins available.
  • Mission 2:
    1. Navigate to ResourceLoader/Core_modules and give a brief description about JS modules and core modules supported by wikimedia.
    2. Navigate to Manual:Interface/JavaScript#mw.config and brief users about the different configuration values can be accessed with mw.config.

      Follow the steps similar to step2 - step7 of mission 1. The user script examples in step 4 should involve the use of “mw” global object.
  • Mission 3:
    1. Brief user about what Api's are.
    2. Navigate to API:Main_page and brief the user about the endpoint for wikimedia api’s and parameters. Provide link for ApiSandbox page.
    3. Once the user comes on ApiSandbox page, brief the user on how one can test wikimedia’s Api’’s through ApiSandbox.

      Further, we will guide the user to create his/her first API request on Wikimedia. We will give the user a set of options to choose from on which request he wants to make(Eg. 1: No. of page views; 2: Get edit history of a page; etc.)

      Once the user has completed his first API request with ApiSandbox, we can follow the steps similar to step2 - step7 of mission 1. The user script examples in step 4 should involve the use of Mediawiki API.
  • Mission 4:
    1. Brief user about OOUI in general and provide navigation link to OOUI/Using_OOUI_in_MediaWiki#JavaScript.
    2. Explain user about the different dependencies that use OOUI and how to load these dependencies. Provide a link to ooui demos.
    3. Brief user that this is the place where they can refer for different ooui features.

      Further, follow the steps similar to step2 - step7 of mission 1. The user script examples in step 4 should involve the use of widgets or other ooui features.

Timeline

Community bonding period :

PeriodTask
May 17, 2021 - May 24, 2021Study more about JS Modules, API’s, OOUI which would help me come up with better user scripts examples during the coding period.
May 25, 2021 - June 2, 2021Come up with a theme for the adventure tour. Design basic elements to be used within the missions, and the introductory template from where all missions can be accessed.
June 3, 2021 - June 7, 2021Environment setup for QUnit. Discuss milestones with mentors.

Coding period :

PeriodTask
June 8, 2021 - June 13, 2021Coding the introductory template.
June 14, 2021 - June 16, 2021Writing the user scripts for the first mission(3 basic js/jquery code examples with well documentation and comments to describe actions performed by script).
June 17, 2021 - June 22, 2021Implementing the tour for the first mission with steps defined above. Resolving bugs of Mission 1 and perform unit tests.
June 23, 2021 - June 25, 2021Writing the user scripts examples that involve use of js modules and “mw” global object(2 or 3 examples).
June 26, 2021 - July 1, 2021Implementing the tour for the second mission. Resolving bugs of Mission 2 and perform unit tests.
July 2, 2021 - July 5, 2021Writing the user scripts examples that involve use of Mediawiki’s API.
July 6, 2021 - July 11, 2021Implementing the tour for the third mission. Resolving bugs of Mission 3 and perform unit tests.
July 12, 2021 - July 15, 2021Phase Evaluation Submit a report of the tasks completed.
July 16, 2021 - July 19, 2021Writing the user scripts examples that involve use of OOUI library.
July 20, 2021 - July 26, 2021Implementing the tour for the fourth mission. Resolving bugs of Mission 4 and perform unit tests.
July 27 , 2021- July 31, 2021Complete the flow of the adventure by linking the missions and making them accessible from the template.
August 1, 2021 - August 8, 2021Bug fixes, code cleanup for submission.
August 9, 2021 - August 16, 2021Documenting the story behind the adventure.(Introduction to adventure, why do mediawiki users need this adventure, goals of the adventure).
August 17, 2021 - August 23, 2021Final week: Submit my work product and final mentor evaluation

Deliverables

  • Attractive theme for the adventure.
  • Design the introductory template and elements(illustrations, buttons etc) to be used within the missions according to the theme.
  • Coding the user scripts examples and tour for each mission based on idea discussed in implementation.
    • Mission 1: Basic Intro to deploying user scripts
    • Mission 2: Writing user scripts using MediaWiki's JS module
    • Mission 3: Writing user scripts using MediaWiki API
    • Mission 4: Writing user scripts using OOUI (Optional)
  • Simultaneous bug fixing after completion of each mission.
  • Regular unit testing of JavaScript code using QUnit.
  • Connect all missions together and complete the flow of adventure.
  • Code cleaning.
  • Documenting the story behind the adventure.

Participation

  • I will be available anytime through Email, Zulip or if required, a well-planned video session.
  • I have been an active user of Github since my freshman year. I will continue contributing via Github to our project and use Phabricator for managing the bugs and tasks.
  • I will contact the mentors regularly and bi-weekly write a blog on the medium describing my work.
  • Apart from working on the project, I would be glad to help other contributors and users solve their issues and help the maintainers in reviewing Patches.

About Me

Education

YearDegree/ExaminationBoard/InstituteCGPA/Percentage
2021B.Tech 2nd yearIndian Institute of Technology, Roorkee9.3/10
2019XIICBSE92.4%
2017XCBSE10.0/10

How did you hear about this program?
Our college has an active community of open source developers. Every year, many of our institute’s students get selected for Open Source Programs such as GSoC and Outreachy. I heard about this program from a lot of seniors in my college.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I will be having my semester examinations from 19 May to 29 May so I will be slightly inactive between those days, which is before the coding period.
During my summer break (30 May to 30 July) I can easily give 50+ hours per week to the project as I have no other commitments. I will be able to do about 35-40 hours a week when my college resumes (3-4 on weekdays and 10+ on weekends). But I intend to complete a major part of the project before my classes begin and thus I will easily able to cope up with the remaining work and deadlines.

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 only applying for Google Summer of Code with Wikimedia organization.

What does making this project happen mean to you?

  • Wikipedia is the world's biggest digital encyclopedia, and when I came to know that the project is open source, I was highly motivated to contribute to it. Now, I have gotten a chance to contribute to the world's biggest digital encyclopedia. I am grateful for this opportunity and assure you of my commitment and determination towards this project.
  • The idea of user scripts was new to me. The user's ability to customize pages according to their use fascinates me as a front-end developer, and I even took a lecture for my juniors at IMG and discussed its implementation on our intranet portal.
  • This project will help me apply my knowledge practically and learn a lot of new things and user scripts in general. Moreover, this project will not only allow me to work with the best developers around the world, but I'll also be able to give back something to the community and make learning easier for them.

Past Experience

Since my freshman year, I have been a software enthusiast, and since then, I have worked on some projects that were indeed a great learning experience for me. In my pursuit of acquiring web development skills, I started contributing to the open-source community to give my part back to the organizations whose products have been an asset to me.
At my university, I work as Project Associate at the Information Management Group(IMG). IMG is solely responsible for maintaining the IIT Roorkee's intranet portal channeli and IIT Roorkee's official website. I have worked on several projects from scratch, so I am well-versed in the software development cycle, i.e., from designing to coding to production to maintenance.

Describe any open source projects you have contributed to as a user and contributor (include links).

  1. Previously I have contributed to WikiEduDashboard enlisted in New_Developers guide of WikiMedia. While implementing this feature, I got a good sense of understanding of the codebase of the project. Working under the mentorship of @Ragesoss never felt like my first contribution and motivated me to continue contributing to the project.
    • #4374(merged) Student's list of trainings and exercises should be ordered by due date, and divided by already-due vs not-yet-due. Work I did in this PR :
      • Write helper functions to
        1. Sort training,
        2. Sort exercises,
        3. To check if the due date has passed.
      • CSS changes for overdue training and exercises.
  2. I have also contributed to File-manager.
    • A Google Drive like service/application to be deployed by the administration and students of IIT ROORKEE for storing/sharing their files, folders and other campus related data. It can be integrated with other applications and thus is currently serving as an alternative to google drive by campus people for managing their files.
    • Github links: filemanager-backend and filemanager-frontend
    • It's access is limited to people of IIT Roorkee, but this guide can give a good intuition of how the project works.

Describe any relevant projects that you've worked on previously and what knowledge you gained from working on them.

  1. Bug Tracker :
    • Description: It is a web app to track bugs in a project aimed to improve the testing process during app development. It allows team members to collaborate efficiently during the testing process. The app uses Django and Django rest framework for backend, and react, redux for the frontend. The app uses OAuth 2 for authentication and WebSockets for real-time commenting system.
    • Github-link : BugTracker
  2. Acad Manager :
    • Description: Acad Manager is a course content management web application developed using PHP. It allows students to manage the course materials efficiently. It was one of my first projects based on PHP.
    • Github-link : EndGem
    • Website : EndGem Live
  3. Car Traffic:
  4. Chat Application :
    • Description: It is a chat application built using PHP. Uses Ajax for live chatting.
    • Code: php-chat-application
  5. Weblog :
    • Description: Weblog is a blogging website build with Php, Bootstrap, Ajax, Mysql, Jquery.
    • GIthub-link : Weblog

You must have written a feature or bugfix for a Wikimedia project during the application phase (see the section about microtasks in the application process steps), please link to it here. We give strong preference to candidates who have done so.
I have successfully completed the microtasks assigned in order to understand the project.

  1. Microtask 1:
    • Basic tour on how to deploy user scripts on wikimedia.
    • Link to code: Microtask 1
  2. Microtask 2:
    • While reading any MediaWiki article, the page contents are displayed only on top of the page. Thus it becomes problematic if a user wants to navigate randomly from one subtopic to another or get a hint of subtopics discussed in the article if he has scrolled down the page. I have accessed this problem with a fixed content menu made with the help of menuselect widget.
    • Another feature that came to my mind was the "scroll to top" feature. I have made an Icon button on the bottom right corner of the page for this feature.
    • Link to code: Microtask 2
  3. Microtask 3:
    • I count the page views of the particular page in the last 2 months and display it along with the title.
    • Link to code : Microtask 3
Link to videos : Microtask 1 and Microtask 2&3

Any Other Info

Add any other relevant information such as UI mockups, references to related projects, a link to your proof of concept code, etc

Event Timeline

Hey @gauransh_d

Thanks for showing your interest to participate in Google Summer of Code with Wikimedia Foundation! Please make sure to upload a copy of your proposal on Google's program site as well in whatever format it's expected of you, include in it this public proposal of Phabricator before the deadline i.e April 13th. Good luck :)

  • Make some room in Community Bonding Period to setup a unit testing enviroment (Maybe QUnit?) like Twinkle gadget test. Add it in deliverables.

write a weekly blog on the medium

  • Do it bi-weekly

Make the changes and upload the proposal on the GSoC site.

GSoC application deadline has passed. If you have submitted a proposal on the GSoC program website, please visit https://phabricator.wikimedia.org/project/view/5104/ and then drag your own proposal from the "Backlog" to the "Proposals Submitted" column on the Phabricator workboard. You can continue making changes to this ticket on Phabricator and have discussions with mentors and community members about the project. But, remember that the decision will not be based on the work you did after but during and before the application period. Note: If you have not contacted your mentor(s) before the deadline and have not contributed a code patch before the application deadline, you are unfortunately not eligible. Thank you!

@gauransh_d ​We are sorry to say that we could not allocate a slot for you this time. Please do not consider the rejection to be an assessment of your proposal. We received over 100 quality applications, and we could only accept 10 students. We were not able to give all applicants a slot that would have deserved one, and these were some very tough decisions to make. Please know that you are still a valued member of our community and we by no means want to exclude you. Many students who we did not accept in 2020 have become Wikimedia maintainers, contractors and even GSoC students and mentors this year!

Your ideas and contributions to our projects are still welcome! As a next step, you could consider finishing up any pending pull requests or inform us that someone has to take them over. Here is the recommended place for you to get started as a newcomer: https://www.mediawiki.org/wiki/New_Developers.

If you would still be eligible for GSoC next year, we look forward to your participation