== ===Develop a UserScript/Gadget tutorial on MediaWiki.org ==
===Profile Information
**Name:** Devyansh Chawla
**IRC nickname on Freenode:** dev_monk31
**Email:**
[email protected]
**Web Profile:** [[ https://github.com/thedevyansh | GitHub ]], [[ https://www.linkedin.com/in/devyanshchawla/ | 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)
===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. Wikipedia’s JavaScript coverage is improved by the collaboration of editors under the name of **JavaScript WikiProject.** The WikiProject also writes user scripts and maintains user script-related pages.
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 Tours are one such medium that can enable newbie 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 adventure tour to facilitate users to learn about user scripts and their components such as MediaWiki’s JS Module (ResourceLoader and its core modules), MediaWiki Action API, and OOUI (to create interfaces using object-oriented paradigm), in a consistent manner.
===Possible Mentor(s)
- **Possible Mentor(s)**: Jay Prakash (@Jayprakash12345), Krishna Chaitanya Velaga (@KCVelaga),1. and Enterprisey (@APerson)Jay Prakash - @Jayprakash12345
- **Have you contacted your mentors already?** Yes2. Krishna Chaitanya Velaga - @KCVelaga
3. Enterprisey - @APerson
**Have you contacted your mentors already?** Yes
===Deliverables
- Design and write the tale or story of the user script adventure tour similar to the story of The Wikipedia Adventure.
- Incorporate the game design or tale in our missions (mentioned above). I’ve thought of a sample game design (named “Third from the Sun” and can be updated of course) and given the basic idea of it while describing the missions below:
1. **Mission 1: Basic Intro:**
> //“After the successful completion of this mission, the chief test pilot will come to know that their world “Terra Prime” is going to be destroyed soon.”//
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 file.
2. **Mission 2: Using MediaWiki’s JS module:**
> //“The test pilot has to make their family understand the situation and convince them to prepare for the escape before it’s too late.”//
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:**
> //“He has to convince the guards on his way to the spaceship that his family and friends are coming along to see him take off.”//
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 (for instance, generating verification tokens for all the family members that’ll authenticate them to enter the spaceship :P).
4. **Mission 4: Using OOUI:**
> //“Ultimate Showdown: The test pilot should find a secret passcode that will enable them to escape the atmosphere of Terra Prime and head towards Earth, the third planet from the Sun.”//
In this final mission, the users will gain practical knowledge of OOUI and will be made to write a user script using it in the context of our game design (wireframe of the OOUI interface, I’m thinking of, is shown below):
{F34339978}
- Perform unit testing using QUnit for the JavaScript code and run the tests before committing the changes to GitHub.
- Write the documentation on how the Guided Adventure Tour is developed on MediaWiki.
- Provide continued support and maintain the project after the Program ends.
===Mockups===Wireframes
- [[ https://drive.google.com/drive/folders/1KsNIIuS4n4CawzXAS3HU0sEEme_OVoHl?usp=sharing | Link to
mockupswireframes ]]
===Timeline
| Period| START | END | W
eekEEK | T
ask |ASK |
|---|---|---|
---|
| May 17
-| June 7 | **Community Bonding Period** | Know about Wikimedia's community, discuss the deadlines and milestones with mentors. Study ResourceLoader, APIs, and OOUI in detail, understand the intricacies involved in Guided Tours, analy
seze The Wikipedia Adventure Tour and think about ways of integrating all missions. Research the game designs or refurbish the proposed story. |
| June 7
-| June 14 | __Week 1__ | Design the landing interface of the UserScript/Gadget Tour, plan the workflow of Mission 1, and write its code
(implementation). |
| June 1
4 -5 | June 21 | __Week 2__ | Unit test Mission 1, bug fixes, write its
story (narrative
)/story on MediaWiki. Write the bi-weekly report. **[1]** |
| June 2
1 -2 | June 28 | __Week 3__ | Plan the workflow of Mission 2 and write its code
(implementation) in a manner consistent with Mission 1. |
| June 2
8 -9 | July 5 | __Week 4__ | Unit test Mission 2, bug fixes, write its
story (narrative
)/story on MediaWiki. Write the bi-weekly report. **[1]** |
| July
5 -6 | July 12 | __Week 5__ | Plan the workflow of Mission 3 and write its code
(implementation) in a manner consistent with previous Missions. |
| July 12
-| July 16 | **Evaluations** | Prepare for the evaluations and overcome the delays in the plan executed so far
, if any. |
| July 17
-| July 24 | __Week 6__ | Unit test Mission 3, bug fixes, write its story
(narrative
)/story on MediaWiki. Write the bi-weekly report. **[1]** |
| July 2
4 -5 | July 31 | __Week 7__ | Plan the workflow of Mission 4 and write its code
(implementation) in a manner consistent with previous Missions. |
| July 31 -| August 1 | August 7 | __Week 8__ | Unit test Mission 4, bug fixes, write its
story (narrative
)/story on MediaWiki. Write the bi-weekly report. **[1]** |
| August 8
-| August 1
65 | __Week 9__ | Write documentation on MediaWiki with the guidance of mentors, and overall testing of the project. |
| August 16
-| August 23 | **Code Submission and Final Evaluations** | Submit the code and project summaries. Fix unforeseen bugs and work on community feedback.
|
| August 24 | August 30 | | Share my experience and learnings while contributing to Wikimedia Foundation on Medium and update my 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 "even" weeks soon. This can give me room for unplanned changes. As such, the last week can be used as a buffer for unexpected spillages and delays.
**After the program ends:**
- Keep contributing to projects of the Wikimedia Foundation.
- Keep an eye on the upcoming Wikimedia events and hackathons.
- Stay in touch with the organization administrators on Zulip and IRC.
===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(matrix.org), 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.
===About Me
> **//Your education (completed or in progress)://**
I’m a sophomore at National Institute of Technology Kurukshetra pursuing B.Tech. 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 11 and June 11. Since 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 11 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 I 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. By working on this project, I’d like to reinforce its selfless mission and be an aid to streamline the learning process of user scripts, which are one of the core elements in Wikimedia projects.
Since I have been a user of Wikipedia for quite a while now, which has helped me in getting my school projects done, I truly appreciate the contributions of all the volunteers who help sustain the goal of providing free knowledge to all. Thus, I would like to create this adventure tour that has the ability to positively impact millions of Wikimedians who employ user scripts to customize their experiences.
Another reason that inspires me to take up this project is its ability to help newbie developers and users with basic JavaScript knowledge create user scripts in a flexible, interactive, and intuitive manner rather than slogging for long on the immense documentation available on MediaWiki and Wikipedia. This will not only save their time but also help them learn on Wikimedia projects in a highly personalized way, by installing user scripts/gadgets easily.
===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 front-end developer as a freelancer which resulted in me revamping the entire user interface of the website ReadingRoots ([[ https://readingroots.in | Visit ReadingRoots ]]) - a platform to manage and share books. I gained good exposure to UI/UX and user-driven outcomes.
- I contributed to a COVID-19 Dashboard project along with other members of my college club which enabled me to improve the UI and website navigation to a great extent. This helped me become familiar with core JavaScript concepts and React.js ([[ https://github.com/gawdsnitkkr/covid_kanvas | GitHub ]] **|** [[ http://gawds.in/covid_kanvas | Visit website ]]).
- e-Yantra Robotics Competition was a 6-month long theme-based competition in which collaboration was the key. Our team had to design a Ball Balancing Platform along with an Inspector Bot simulation to ascertain its quality. My contribution to every task of the competition was quite significant. Also, our team was always 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.
- Moreover, our team developed a prototype of the Traffic Management and Accident Detection system (not perfect though) using OpenCV as part of the Technical Fest of my Institute where we finished in second place ([[ https://github.com/Hardik-hi/Team-Novus-Productathon | GitHub ]]).
===Personal Experience
- I was introduced to programming in 11th standard and since then I get continuously amazed at the plethora of stuff we can do with it. Since I spend most of my time coding, I am fairly proficient with data structures and algorithms and have developed considerable interest and skills in web development. I mostly like to work with JavaScript and Python Technologies. Speaking of Python, our University Team (named Kurukshetra Warlords) has been recently selected as Finalists of OpenCV AI Competition 2021, sponsored by Microsoft Azure and Intel, in which we are implementing our proposed idea using OpenCV AI Kit with Depth (OAK-D) ([[ https://opencv.org/opencv-ai-competition-2021/ | OpenCV AI Competition ]]). We are in the top 250 teams that have been selected out of 1400+ teams that applied from all over the world.
- Besides, being a member of my college club (Graphics and Web Development Squad), I, along with few others, recently conducted a workshop on Web Scraping with Telegram Bot. In brevity, these experiences have helped me improve my skills, which is the reason I feel confident in contributing to this GSoC project and bring a positive change to the users’ learning experience. The key takeaways for me are: I’ve learned to manage tasks in stressful situations and collaborate efficiently. As far as the programming languages and technologies are concerned, 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).
===Microtasks
cCarried
outOut
- **MICROTASK 1: Create a mini-tour using any two steps**
- This mini-tour guides the user to edit their Special:MyPage/common.js page in order to write user scripts.
- Link: [[ https://www.mediawiki.org/wiki/User:Novusistic/createUserScript.js | User:Novusistic/createUserScript.js ]]
- **MICROTASK 2: Create a basic user script that uses OOUI in JavaScript**
- This user script enables users to play a “Guess the random number” game using OOUI Popup widget as a custom widget.
- Link: [[ https://www.mediawiki.org/wiki/User:Novusistic/customWidgetInOOUI.js | User:Novusistic/customWidgetInOOUI.js ]]
- **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: [[ https://www.mediawiki.org/wiki/User:Novusistic/API-Demo-using-OOUI.js | 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.
- Link: [[ https://thedevyansh.github.io/wikimedia-microtasks/ | Wikimedia Microtasks ]]