Profile
Name: Sarthak Kundra
Zulip: Sarthak Kundra
Profile: [[ https://www.linkedin.com/in/sarthak-kundra-2b6247189/ | LinkedIn ]]
GitHub: [[ https://github.com/sarthakkundra | Github ]]
Email: sarthakkundra21@gmail.com
Location: Ghaziabad, India
Working hours: 1300 - 2100 hours (UTC+05:30)
Synopsis
UserScripts are special JavaScript programs written in JavaSciript by MediaWiki users for use on Mediawiki itself. They allow users to do certain special actions which they normally cannot on a Mediawiki webpage like manipulating the DOM, appending HTML elements etc. These scripts allow users to perform some pretty powerful actions such as adding custom widgets to their webpage allowing them to create a highly customizable experience.
Naturally offering such advanced functionalities come at a cost of a complex learning and exploring curve. Since this is one of the many functionalities offered, from the user’s point of view it becomes quite difficult to find their way around the documentation.
The Mediawiki Guided Tour user script will aim to solve this problem through a gamified tour, allowing the user to explore all the necessary documentation they need to know / read in order to use Mediawiki’s JS Module, API and OOUI to create stunning user scripts. The interactive and gamified user script will give the users a sense of achievement during each mission, helping them to get important information without getting bored.
Possible Mentor(s)
Jay Prakash - @Jayprakash12345
Krishna Chaitanya Velaga - @KCVelaga
Enterprisey - @APerson
Have you contacted your mentors already? Yes (Jay Prakash and Enterprisey) via Zulip.
Deliverables
A `gamified` tour with interactive UX focused dialogues which helps new users understand the following points :
Mediawiki’s JS Module, it’s use and how to write it.
Mediawiki API, it’s use and different functionalities offered by it.
OOUI, different widgets and how to use them.
Project Overview
**Mission 1 (Basic Intro)**
The tour will start with the users landing on the tour’s landing page. The users will first be greeted and introduced to the fact that a tour has begun and what it is all about (Mediawiki modules, OOUI, etc.). The users will then be introduced to the underlying story of the whole tour which will be followed throughout the tour to create a sense of uniformity and continuation.
**Mission 2 (Using Mediawiki’s JS Module)
**In this mission the users will first be explained why the ResourceLoader module is the heart of any UserScript / Gadget they write. After that the following steps will be there in this mission :-
- Introduce them to the vocabulary to be used in the entire mission using this page.
- The users will be transported to this tutorial explaining the steps, to give them a basic understanding about loading modules and the different ways they can load a module.
- The users will be transported to this page explaining how to use ES6 in their userScripts because the majority of the audience taking this tour will be new developers at MediaWiki so there is a high probability they prefer using the latest JavaScript features.
- At the end they will be transferred to this page which will give them all the resources they need if they wish to learn more about the same.
Using this knowledge the user will then be prompted to write a very basic user script to access some data from a page and do some comparative checks to it like checking if the heading of a page has it’s first letter capitalized or not.
{F34388361}
{F34388376}
{F34388420}
{F34388430}
{F34388438}
**Mission 3 (Using Mediawiki API)**
In this mission the users will first be told what is the Mediawiki API and most importantly pointed to the API endpoint which they will need to use while using it in their user scripts, gadgets, etc. After that the following steps will be there in the mission :-
- The user will then be transported to this page where they will be explained the basic rules (etiquettes) while using the API such as rate limit of the requests, user agent headers, etc.
- The user will be transported to this page where they will be pointed to the overall API documentation (which they can refer later) and to the additional notes section.
- The user will be transported to this page, telling them the importance of tokens and as a mini task, be asked to generate an API token.
- As the last step, the user will be transported to this tutorial where they’ll be given a guided explanation of all the functions.
Using this knowledge the user will then be prompted to write a user script that queries a certain MediaWiki API whose result will be cross referenced with a test to make sure that they completed the task successfully.
**Mission 4 (Using OOUI)**
In this mission, following the previous convention the user will first be explained “What is OOUI?” and “What is its importance?”. After that the following steps will be there in this mission :-
- The users will be transported to this page and then this page to tell them about elements and widgets respectively as they are the fundamental building blocks of any user interface.
- The users will be transported to this page where they will be explained the developer user flow while using an OOUI widget (creating, configuring a widget and then adding it to the DOM).
- Explaining the concept of Mixins to the users to allow them to customize the widgets.
- At the end the users will be transported to this page where it’ll be explained to them how to use OOUI in MediaWiki.
**Timeline**
`May 17 to June 7`
Community bonding period. Discuss requisites and prerequisites with mentors and conclude whether any changes are needed to the original plan of action. Explore the Mediawiki API in more depth to see whether any important aspect has been left out of the explanation in the tour. Design a high fidelity for the tour’s landing page.
`June 8 to June 15`
Implement the basic intro mission. Setup unit testing environment (QUnit).
`June 16 to June 23`
Implement the first two steps of the Mediawiki JS module mission. Setup the introductory blog post.
`June 24 to July 1`
Implement the last two steps of the Mediawiki JS module mission and the corresponding exercise.
`July 2 to July 11`
Implement the introduction to Mediawiki API mission. Complete halfway blog post. Buffer for any backlogs till phase 1
`July 12 to July 16`
Phase I evaluation
`July 17 to July 24`
Implement all the 4 steps of the Mediawiki API mission.
`July 25 to August 1`
Implement the prompt for the Mediawiki API mission and write the test to make sure that the mission is completed successfully or not.
`August 2 to August 9`
Implement the introduction to Using OOUI mission and the first two steps of the same. Draft the final blog post.
`August 10 to August 16`
Implement the last two steps of using OOUI mission. Publish the final blog post. Buffer time for any backlogs.
`August 16 to August 23`
Final evaluation.
**Stretch goals**
- Create a mission for Using OOUI mission.
- Creating a score leaderboard and adding that in the tour’s landing page, showing the latest scores.
**Participation**
- I will communicate with mentors via email and Zulipchat. I am also active on WhatsApp if that's preferable.
- I will use Phabricator for managing tasks and subtasks.
- I will provide reports twice a week via Google Docs and publish a blog post at the end of the period on my Dev profile (https://dev.to/kundrasarthak) summarizing the entire experience.
**About me**
- I am currently pursuing a Bachelor's of Technology in Computer Science from Vellore Institute of Technology. I expect to graduate in May 2022.
- I participated in the Major League Hacking Fellowship and the Ethereum India Fellowship with Ankit Maity (QEDK) where we worked together on a lot of projects. He introduced me to the organisation and this opportunity.
- I do not have any job or educational commitments due to the ongoing Covid-19 pandemic. I am confident I will be available for the entire duration of this project. I expect to give 350+ hours (estimating from 5x70) to this project.
- I am only applying for GSoC '21. Per eligibility requirements, I would also like to state that I have never participated in GSoC or Outreachy.
- As someone who has been a contributor to some of Mediawiki’s other projects like VideoCutTool (Front-End, Back-End and Service Worker) and Twinkle. I intend to be a part of the Wikimedia movement in the future as well, taking on the role of a student developer with the Foundation gives me the opportunity to give back to the project. Outreachy and GSoC do a good job of bringing excellent developer candidates directly in contact with people organizations such as the WMF. I believe I can make that process easier for new developers at Mediawiki using this userscript, as well as expand my knowledge and involvement with the worldwide Wikimedia movement. It would mean a lot to me personally to be able to contribute positively towards making their onboarding process easier and giving deserving candidates a helping hand to begin contributing to the Wikimedia project. I would also like to keep contributing to this particular project to make it successful and also the Wikimedia movement as a whole.
Past experience
I've been contributing to WMF since the start of 2021. I have had the chance to be in touch with some great developers along the way such as Gopa Vasanth, Ankit Maity, Jay Prakash etc who’ve guided me into creating some meaningful contributions to the tools. Some of them are listed below for reference :-
[[ https://phabricator.wikimedia.org/rLTVT5f87ae0f4a9ca52a3b91033c5127ca5298e1a294 | Phab issue ]]
**Refactored the VideoCutTool front-end** wherein I moved a couple of utility functions (formatTime and decodeTime) to another directory to decrease the size of the Home component. This helped in better maintainability and readability of code.
[[ https://phabricator.wikimedia.org/rLTVTef4e0010c0f0167101b51ce1d3d36f020a65ecaf | Phab issue ]]
**Created a utility package to dynamically import files added in the i18n directory** and render the language names in the dropdown for the user to select. This helped in improving the developer experience by taking away the process of hardcoding each value.
[[ https://phabricator.wikimedia.org/rLTVTb7c148026102e88fd6aa4b21da8a5fd57b01d0ec | Phab issue ]]
**Created a Docker image** for VideoCutTool front-end. This will allow developers to easily setup the project locally on their machine.
[[ https://phabricator.wikimedia.org/rLTVT244838011999bebbde9d9322fa56f4ca57b0b783 | Phab issue ]]
**Fixed a minor typo** in the English i18n file.
Apart from Mediawiki I have been involved in the open source community for a long period of time.I have previously worked with **Facebook open source on Docusaurus**. Wherein I created an open graph image as a service, a build size bot and a Lighthouse CI Github action. I have also worked with **Mozilla on their Front-end Addons website** where I created a major UI update (to be released in the next version). I have also worked with** Internet Archive on their Wayback Machine Web-Extension** wherein I created a PoC for rate limiting for bulk saving webpages and also created a continuous integration action.
**Microtasks**
MICROTASK 1: Create a mini-tour using any two steps
- Created a mini-tour on my personal wiki page.
- Link to tour.
MICROTASK 2: Create a basic user script that uses OOUI in JavaScript
- Created a todo list app using custom widgets, following this tutorial.
MICROTASK 3: Create a basic JavaScript program that makes an interesting query using the MediaWiki API
- Created a function to use the checkToken module.
- Link to source code.