Page MenuHomePhabricator

GSoC 2021 Propsal: Develop a Guided Tour UserScript on MediaWiki.org
Closed, DeclinedPublic

Description

Profile
Name: Sarthak Kundra
Zulip: Sarthak Kundra
Profile: LinkedIn
GitHub: 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 [[ https://www.mediawiki.org/wiki/ResourceLoader/Presentations | 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.

Desktop - 9.jpg (1×1 px, 347 KB)

Desktop - 11.jpg (1×1 px, 425 KB)

Desktop - 12.jpg (1×1 px, 446 KB)

Desktop - 13.jpg (1×1 px, 448 KB)

Desktop - 14.jpg (1×1 px, 360 KB)

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

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.

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.

Phab issue
Created a Docker image for VideoCutTool front-end. This will allow developers to easily setup the project locally on their machine.

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.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Note :- Having some trouble uploading the high fidelity mockups due to their large size and poor network conditions. WIll update them ASAP.

SarthakKundra renamed this task from GSoC 2021 Propsal: Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia_Adventure to GSoC 2021 Propsal: Develop a Guided Tour UserScript on MediaWiki.org .Apr 14 2021, 10:27 AM
SarthakKundra updated the task description. (Show Details)

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!

Hi @srishakatux I have moved my proposal to the "Proposal Submitted" board. I would like to take this comment as an opportunity to clarify that

  1. I have contacted the mentors before the deadline
  2. I have submitted multiple patchsets.

Thank you for the heads up :)

Gopavasanth added a subscriber: Gopavasanth.

@SarthakKundra ​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