Page MenuHomePhabricator

GSoC 2021 Proposal: Develop a UserScript/Gadget tutorial on similar to Wikipedia:The_Wikipedia_Adventure
Closed, ResolvedPublic


1. Profile Information

Name: Devyansh Chawla

IRC nickname on Freenode: dev_monk31


Web Profile: GitHub, Linkedin

Timezone: IST (Indian Standard Time) (UTC + 05.30)

Location (country or state): Haryana, India

Typical working hours (include your timezone): 18:00 IST to 01:00 IST (5 - 5.5 hours on weekdays), 10:00 IST to 22:00 IST (10 - 10.5 hours on Saturdays and Sundays)

2. Synopsis

User scripts are the JavaScript programs that provide Wikipedia users the ability to customize and change the behavior of their user account. It enables a user account to do various things that it otherwise couldn’t. Numerous user scripts and gadgets (promoted user scripts) are available for users to install quickly. Users can also write their own user scripts by either starting from scratch or forking an existing user script.

Even though MediaWiki has excellent documentation on user scripts, it’s quite overwhelming. Owing to the powerful functionalities that user scripts provide, one should be able to get started with them easily and be able to leverage these powers quickly. Guided Adventure Tours is one such medium that can enable amateur developers and users with a little bit of JavaScript knowledge to learn about them in an interactive, stimulating, and appealing way.
This project is about creating a UserScript/Gadget guided tour to facilitate users to learn about user scripts and how they are created using fundamental constructs such as MediaWiki JS Module (ResourceLoader and its core modules), MediaWiki Action API, and OOUI (used to create interfaces with object-oriented paradigm), in a consistent manner. The Guided Adventure Tour will be carried out in 4 missions:

  • Mission 1: Basic Introduction to writing and installing user scripts
  • Mission 2: Using MediaWiki JS module for writing user scripts
  • Mission 3: Using MediaWiki API for writing user scripts
  • Mission 4: Using OOUI for writing user scripts
Possible Mentors
  1. Jay Prakash - @Jayprakash12345
  2. Krishna Chaitanya Velaga - @KCVelaga
  3. Enterprisey - @APerson

Have you contacted your mentors already? Yes

3. Project Details

This proposal aims at developing a Guided Adventure Tour to smoothen the learning process of user scripts. The following list defines the proposed workflow of all the Missions that will be the basis for work in the project.

NOTE: In the context of the tour, the workflow refers to the sequence of steps in individual mission tours.

  • Mission 1:
    1. Tell what user scripts and gadgets are.
    2. Make users familiar with the significance of common.js file and skin.js file and navigate to "Special:MyPage/common.js" file.
    3. Edit the common.js file.
    4. Import an already existing user script from Wikipedia:User_scripts/List.
    5. Preview the changes.
    6. Save the changes.
    7. Instruct them to write another user script in User namespace (I’ll code a sample user script during the coding period which will include only basic JS/jQuery constructs).
    8. Navigate to "Special:MyPage/skinname.js" file.
    9. Import the user script written in step 7 in skin.js and follow step 5 and step 6.
    10. End Mission 1.

      (The first microtask I’ve done below guides the users to edit their Special:MyPage/common.js page in order to write user scripts.)
  • Mission 2:
    1. Tell about ResourceLoader and its importance while coding Gadgets.
    2. Make users familiar with core JS modules i.e. jquery and mediawiki by navigating to ResourceLoader/Core_modules.
    3. Show users a well presented table containing the config values and methods that ship with mw.config.
    4. Instruct them to write another user script in User namespace (I’ll code a sample user script during the coding period which will include the use of mw global object).
    5. Navigate to Special:MyPage/common.js file.
    6. Import the user script written in step 4 in common.js, preview changes and save.
    7. End Mission 2.
  • Mission 3:
    1. Tell about the MediaWiki Action API.
    2. Make them explore the demo apps on Toolforge to get a glimpse of a wide range of API use cases.
    3. Brief about the API endpoints, parameters, query strings etc. in a well presented manner.
    4. Navigate to API Sandbox and tell them about its relevant functionalities to send API requests to Wikimedia servers.
    5. Similar to the idea of the third microtask I’ve done below, give users the choice of selecting the type of request they want to send (like showing recently added articles, showing Wikipedia articles near to the user's location etc.).
    6. Instruct them to write another user script in User namespace (I’ll code a sample user script during the coding period which will include the use of API).
    7. Navigate to Special:MyPage/common.js file.
    8. Import the user script written in step 6 in common.js, preview changes and save.
    9. End Mission 3.
  • Mission 4:
    1. Tell about OOUI and how useful and flexible it is while dealing with DOM elements and data flows separately.
    2. Navigate to OOUI Demos so that users can get intuition of OOUI widgets and widget customizations.
    3. Show the various modules required as dependencies for interacting with OOUI features in a well presented manner.
    4. Instruct them to write another user script in User namespace (I’ll code a sample user script during the coding period which will include the use of OOUI).
    5. Navigate to Special:MyPage/common.js file.
    6. Import the user script written in step 4 in common.js, preview changes and save.
    7. Optional: Show them how they can promote their user scripts to Gadgets.
    8. End Mission 4.

4. Deliverables

  • Design the story or theme of the user script adventure tour similar to the story of The Wikipedia Adventure.
  • Incorporate the theme in all the missions and write the sample user scripts relevant to each mission.
    1. MISSION 1: BASIC INTRO- In this mission, the users will gain practical knowledge of what User Scripts and Gadgets are and how the existing user scripts are imported/loaded in the user account. They will be made to implement a basic yet interesting use case of user scripts and import it in their common.js or skin.js file.
    2. MISSION 2: USING MEDIAWIKI JS MODULE- In this mission, the users will gain practical knowledge of ResourceLoader, why they are bound to interact with ResourceLoader as a Gadget coder, and the most useful core modules available. With the concepts learned in MIssion 1 and Mission 2, they will be made to write a user script using core modules, especially the MediaWiki (mw) module.
    3. MISSION 3: USING MEDIAWIKI API- In this mission, the users will gain practical knowledge of MediaWiki API, how to test and send requests to API in the API Sandbox. They will be made to write a user script that does something interesting using the API.
    4. MISSION 4: USING OOUI- In the final mission, the users will gain practical knowledge of OOUI and will be made to write a user script using OOUI in the context of our game design.

      The wireframe of the landing interface of the Guided Adventure Tour I’m thinking of is shown below:

      Landing page of the tour.png (634×1 px, 34 KB)
  • Perform unit testing using QUnit for the JavaScript code and always run the tests before committing the changes to GitHub.
  • Code optimization.
  • Write the documentation of the UserScript/Gadget Guided Adventure Tour on MediaWiki.
  • Provide continued support and maintain the project after the Program ends.

5. Timeline

Community Bonding Period: (May 17 - June 7)

(1) Know about Wikimedia's community, discuss the deadlines and milestones with mentors. (2) Study ResourceLoader, APIs, and OOUI in detail, understand the intricacies involved in Guided Tours, analyze The Wikipedia Adventure Tour and think about ways of integrating all missions. (3) Research the game designs or themes. Set up the testing environment for QUnit.

Coding period:

June 8 - June 13Design and code the landing interface of the Userscript/Gadget Tour.
June 14 - June 19Plan the workflow of the first mission, write introductory user script samples, and code Mission 1.
June 20 - June 24Unit test Mission 1, bug fixes, write its narrative/story on MediaWiki. Write the bi-weekly report. [1]
June 25 - June 30Plan the workflow of the second mission, write user script samples that use the MediaWiki JS module, and code Mission 2 in a manner consistent with Mission 1.
July 1 - July 5Unit test Mission 2, bug fixes, write its narrative/story on MediaWiki. Write the bi-weekly report. [1]
July 6 - July 11Plan the workflow of the third mission, write user script samples that use the MediaWiki API, and code Mission 3 in a manner consistent with previous Missions.
July 12 - July 16Evaluations: Prepare for the evaluations and overcome the delays in the plan executed so far, if any.
July 17 - July 22Unit test Mission 3, bug fixes, write its narrative/story on MediaWiki. Write the bi-weekly report. [1]
July 23 - July 29Plan the workflow of the fourth mission, write user script samples that use OOUI, and code Mission 4 in a manner consistent with previous Missions.
July 30 - August 4Unit test Mission 4, bug fixes, write its narrative/story on MediaWiki. Write the bi-weekly report. [1]
August 5 - August 11Write the project’s documentation on MediaWiki with the guidance of mentors, and overall testing of the project.
August 12 - August 16[2]
August 16 - August 23Code Submission and Final Evaluations: Submit the code and project summaries. Fix unforeseen bugs and work on community feedback.
August 24 - August 30Share my experience and learnings gained from the project on Medium and update the MediaWiki user page to accommodate the same.

[1] Since I'd try to get my code reviewed for each Mission regularly, I hope to execute the tasks of these weeks soon. This can give me room for unplanned changes. As such, the period [2] can be used as a buffer for unexpected spillages and delays. If everything goes as per the plan, I’ll utilize the period [2] to improve the overall Adventure tour and optimize the codebase.

6. Participation

  • I’ll be creating a repository on GitHub with a master and a development branch. The code will be pushed to the development branch periodically and merged with the master branch after reviewing and testing. The bugs and subtasks will be managed on Phabricator.
  • I’ll be using the MediaWiki-Docker environment for the development and testing of the Userscript/Gadget guided adventure tour.
  • I’ll write bi-weekly reports, predominantly in the User namespace, and update them on my MediaWiki user page. To make general project-related work and information more accessible, I will occasionally write Medium articles.
  • I’ll consult with my mentors via Freenode(, in the Phabricator task, and/or in Zulip as per the requirements, in case I’ve queries regarding the implementation/workflow/architecture of guided tours, extensions, etc. I’ll be active on the #mediawiki IRC channel to ask general doubts related to MediaWiki.
  • I’m reachable from 10:00 IST to 01:00 IST and can be pinged or DMed during working hours via any of the above platforms including email

7. About Me

Your education (completed or in progress):

I’m a sophomore at National Institute of Technology Kurukshetra, Haryana, India pursuing Bachelor of Technology in Information Technology. I've completed my secondary education from R.S. Public Sr. Sec. School, Karnal, Haryana, India.

How did you hear about this program?

I heard about Google Summer of Code in my freshman year during a workshop that was being organized in our Institute. The students talked about their experiences of applying to the program, getting selected, and contributing to an open-source organization for the use and benefit of all. The very idea of working on a real-world project in a sought-after organization and at the same time getting the opportunity to learn and grow as a developer fascinated me.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

My end-semester exams would be conducted between May 12 and May 24. Since the first week of the Community Bonding Period lies in this period, I’ll plan my schedule accordingly to keep up with the events such as getting familiar with the community, discussing strategies with my mentors to consolidate the timeline and milestones of the project.

But I’ll focus on GSoC for more than the typical working hours mentioned above from June 7 to July 26. From July 26 onwards (that’s when my third year of college commences), I’ll continue as per the specified typical working hours. Rest assured, I'll be in touch with my mentors and inform them of my progress regularly.

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

How much time would you be able to commit to the Program?

During the Coding Period (July 7 - August 16), I'd be able to commit 30-35 hours per week.

What does making this project happen mean to you?

The vision of the Wikimedia Foundation to empower everybody with the sum of available knowledge, that fully represents human diversity, urges me to contribute to this organization. I’m inspired by the contributions of the volunteers who help sustain the goal of providing free knowledge to all. By working on this project, I’d like to reinforce its mission and be an aid to streamline the learning process of user scripts, which are one of the core elements in Wikimedia projects.

Another reason that inspires me to take up this project is its ability to help users with little or no user JavaScript background to customize their user account in less time, and read the user script documentation only when required. This will surely improve the User Experience and usability of MediaWiki.
Implementing this project would help me apply my skills practically and get to learn new things by interacting with some of the best developers around.

8. Past Experience

  • I’ve worked on various JavaScript projects which have helped me gain proficiency and intuition in the internal structure and details of how things work together in JavaScript and frameworks. I undertook the role of frontend developer as a freelancer where I revamped the entire user interface of the website ReadingRoots (Visit ReadingRoots) - a platform to manage and share books. I gained good exposure to UI/UX and user-driven outcomes.
  • I contributed to the UI and website navigation of a COVID-19 Dashboard. This helped me become familiar with core JavaScript concepts and React.js (GitHub | Visit website).
  • In e-Yantra Robotics Competition 2021 (eYRC), our team designed a Ball Balancing Platform along with an Inspector Bot simulation to ascertain its quality. My contribution to all tasks of the competition was quite significant. At every stage, our team was in the Top 30 teams out of the 600+ teams that participated from all over India. This massive project-based learning event not only taught me how to manage time effectively but also techniques to collaborate remotely and get work done.
  • I was a part of a team that developed a prototype of the Traffic Management and Accident Detection system using OpenCV as part of the Technical Fest of my Institute where we finished in second place (GitHub).
  • Our University team (named Kurukshetra Warlords) has been recently selected as regional finalists from the region - Central Asia + Southern Asia, of OpenCV AI Competition 2021 (OpenCV AI Competition), sponsored by Microsoft Azure and Intel, in which we are implementing our proposed idea using OpenCV AI Kit with Depth (OAK-D). We are in the top 250 teams that have been selected out of 1400+ teams that applied from all over the world.
  • I contributed to the Alumni website of GAWDS (Graphics and Web Development Squad, NIT Kurukshetra) which updates the DOM using API whenever a user (in this case, GAWDS alumnus) fills his/her respective entry using google form.
  • I am proficient in C/C++, Python, HTML, CSS, Bootstrap, JavaScript, jQuery, React.js, and Node.js, Git, Linux, and basic PHP (which I've taught myself during the period between Mentor Orgs announcement and Student Application Period, for gaining a sort of intuition in MediaWiki installation).

9. Microtasks Carried Out

  • MICROTASK 1: Create a mini-tour using any two steps
  • MICROTASK 2: Create a basic user script that uses OOUI in JavaScript
  • MICROTASK 3: Create a basic JavaScript program that makes an interesting query using the MediaWiki API
    • This user script enables the user to interact with the MediaWiki API using the interface created with Custom Widget in OOUI. It creates the following API queries using separate buttons: (i) Shows the recently added Wikipedia articles in a specified category (category specified in the input field) and (ii) Shows the Wikipedia articles near the specified location.
    • Link: User:Novusistic/API-Demo-using-OOUI.js
  • NOTE: I have also created the following webpage which contains the details for executing the code and the corresponding output of the microtasks.

10. Wireframes

Event Timeline

@Jayprakash12345 @KCVelaga @APerson Please provide your suggestions to improve this draft of the proposal.

Jayprakash12345 renamed this task from Develop a UserScript/Gadget tutorial on similar to Wikipedia:The_Wikipedia_Adventure (Proposal for GSoC 2021) to GSoC 2021 Proposal: Develop a UserScript/Gadget tutorial on similar to Wikipedia:The_Wikipedia_Adventure.Apr 11 2021, 4:31 PM

Hey @Novusistic

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 :)

Develop a UserScript/Gadget tutorial on

  • Remove from top of the proposal

(named “Third from the Sun” and can be updated of course)

  • Remove whole story with its statements from Missions. It will too much to review it now and also, there are many things, we need to consider during creation of story.

(for instance, generating verification tokens for all the family members that’ll authenticate them to enter the spaceship :P)

  • Remove it. MediaWiki does not generate custom type tokens. It have certain type of token like login token or csrf token. User may be expose their token accidentally. It needs to analysis on whether token should use or not.

Success! You all are set to travel

  • Remove this wireframe

Authenticate - OOUI.png and Final - OOUI.png

  • Remove these wireframe as story needs to be defined later.

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

@Jayprakash12345 @Gopavasanth Thanks a lot for your valuable suggestions and guidance :)
I've made the required changes and uploaded on GSoC website too.

GSoC application deadline has passed. If you have submitted a proposal on the GSoC program website, please visit 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!

Is everything in this project task planned for Google-Summer-of-Code (2021) completed? If yes, please consider closing this task as resolved. If bits and pieces are remaining, you could consider creating a new task and moving them there.