Page MenuHomePhabricator

GSoC 2021 Proposal : Update the front-page of Wikimedia projects
Open, Needs TriagePublic

Description

Profile Information

  • Name: Bhaarat Kumar Khatri
  • Email: bharatkhatri351@gmail.com
  • Zulip : Bhaarat Kumar Khatri
  • Github: Bhaarat Kumar Khatri
  • LinkedIn: Bhaarat Kumar Khatri
  • Location: Agra, Uttar Pradesh, India.
  • Typical working hours: I will be working from 11 AM to 8 PM on weekdays as well as on weekends. All the timings are in Indian Standard Time(IST)(UTC+5:30).

Synopsis

Short summary describing your project and how it will benefit Wikimedia projects

The central Wikimedia portal wikimedia.org and the other sister portal pages provide central access to the Wikimedia projects. The main aim of the Wikimedia projects is to empower and engage people around the world to collect and develop educational content under a free license or in the public domain.
The front page of Wikipedia: www.wikipedia.org, underwent a subtle renewal in 2016. The code was moved from a series of scripts on meta.mediawiki.org into a git repository which utilizes Mustache templates and a build step to generate the final HTML page. Unfortunately, Wikimedia’s other projects, wikiversity.org ,wikibooks.org, wikinews.org, wikiquote.org, wiktionary.org left out of this renewal and their pages are still generated via the scripts on meta.wikimedia.org. The sister portals are still just HTML source code maintained as wiki pages on Meta-Wiki (with some Lua modules semi-automating updates). They wouldn’t benefit from wikipedia.org’s dynamic features.

The main aim of this project is that all the sister portals use the same build system and resources. By Using (templates, scripts, styles) of www.wikipedia.org , we can get the same build system to all sister portals.
Some Of the benefit Wikimedia sister Portals will have after update: -

  • They will have interesting content with a more modern look and feel. This change helps us to decrease the bounce rate on all sister portals.
  • The search box will display metadata in the dynamic type-ahead search results to help visitors choose exactly what they were looking for. It will increase the number of clicks on search results.
  • Adding descriptive text to another sister portal link. It will increase page visits to other sister portals.
  • Adding dropdown menu having top most languages by article counts. All the language links will be clickable, enabling the visitor to quickly go to that language specific wiki site.

Mentor(s): @Jdrewniak
Have you contacted your mentors already? Yes!

Implementation Details

The main aim of the project is to modernize the sister portals so that they can get benefits of new features of Wikipedia.org as mentioned above.
I have mentioned enhancement in one of the sister portal in detail below

1. Looks and feel of top 10 languages

  • With modern look and feel.
Screenshot from 2021-04-03 03-19-59.png (444×730 px, 68 KB)
Screenshot from 2021-04-03 03-19-11.png (411×645 px, 53 KB)

2. Search Box

  • New layout of search box
  • Search suggestion layout with better dimensions
  • user friendly language selector.
Screenshot from 2021-04-03 16-53-09.png (539×761 px, 87 KB)
Screenshot from 2021-04-03 03-19-25.png (649×598 px, 122 KB)

3. languages by article counts in dropdown

  • A dropdown feature to make improve UX.
  • All language structures in well mannered.
Screenshot from 2021-04-03 03-20-02.png (409×1 px, 80 KB)
Screenshot from 2021-04-03 03-19-29.png (546×1 px, 94 KB)

4.Footer

  • Other project sister link with some descriptive tags.
  • Redirecting link to download wikipedia from playstore and appstore.
Screenshot from 2021-04-03 03-20-02.png (316×1 px, 48 KB)
Screenshot from 2021-04-03 03-19-35.png (495×1 px, 118 KB)

5.Mobile View

  • Better UI/UX for Mobile.
Screenshot from 2021-04-03 03-18-03.png (689×358 px, 95 KB)
Screenshot from 2021-04-03 03-17-31.png (697×359 px, 57 KB)

Flowchart

  • This is a predicted flowchart of future portals.
  • Potential changes can be done according to mentor guidance.

portal flowchart.jpg (544×1 px, 77 KB)

Deliverables

July12 – July 16 (Phase 1 Evaluation period)
• Modernized portal wikitionary.org and wikiversity.org with all the dynamic features of Wikipedia.org.
August 16 – August 23 (Final Evaluation period)
• Modernized portal wikiquote.org, wikinews.org and wikibooks.org with all the dynamic features of Wikipedia.org.
• Updated Documentary regarding all changes in codebase.

Additional
• I plan to start a blog where I will write about my work on this project once every two weeks. This blog will help us in three way

  1. It will help mentor to track my current progress.
  2. It will help me to update my documents.
  3. It can also help New contributors who want to understand the codebase in depth.

• I will continue to maintain the portals even after the GSoC program.

Proposal Timeline

PeriodWeek NoTimeline (Before the official coding time):
May 17 – May 23(Week-1)Get to know the Community more, and bond with mentors, admins and developers and familiarize more with codebase (Html templates, CSS, JavaScript, i10 files, Gulp Build Pipeline).
May 23 - May 28(week-2)Read more about gulp build system and familiarize myself with plugins used in codebase.
May 29 - June 4(week-3)Factor out common files (templates, postcss, js, i10jsons) which will be used in all portals.
June 4 - june 7(week-4)During this period, I will remain in constant touch with my mentor and the Zulip community to discuss and finalize on the modifications of portals.Thus, with the help of my mentor I will become absolutely clear about my future goals, the final implementations
PeriodWeek NoTimeline (Official coding period starts):
(June 7 – June 13)(Week-1)Transfer all common files (templates, postcss, js, i10-jsons) into new folder name “common” and make required changes in the gulp file so that portal wikipedia.org works well.
(June 14 – June 27)(Week-2 and Week-3)Start working on modernizing wikitionary.org portal. Build a folder with name "Wikitionary.org" in src directory. (portal specific) Work on customize Javascript and handlebars and collect all sprites and png for the portal . Then, Update controller.js , other-project.json , rtl-language.json (for language customization for particular portal ).
(June 28 - July 11)(Week 4)Start working on modernizing wikiversity.org portal.
(July12 – July 16)(Phase 1 Evaluation period)
(July 17 - July 23)(Week-1)Start working on modernizing wikibooks.org portal
(July 24 - July 30)(week-2)Start working on modernizing wikiquote.org portal.
(July 31 - August 6 )(week-3)Start working on modernizing wikinews.org portal
(August 7 - August 16)(Last week)Last week's buffer for Unpredictable delays , removing extra dependencies from gulp which is used by sister portals and bugs and Work on updating documentation with the help of mentor.
(August 16 – August 23)(Final Evaluation period)

Participation

• I will be available (within 7:00 AM to ~1:00 AM IST) for communicating through my Gmail: bharatkhatri351@gmail.com
• I’ll be active on the #portal IRC channel and will be asking any general queries regarding Wikimedia/portals there.
• I’ll contact to @Jdrewniak through #IRC channel regarding any urgent queries .
• I have a good experience dealing with Gerrit. So, I'll be committing my progress to the master branch of the wikimedia/portals extension via Gerrit.
• I have also a good experience with dealing with Phabricator. So, I will use it for getting community review, publishing errors and questions relevant to my tasks.

About Me

Education:
I’m a second-year student pursuing a Bachelor’s Degree in Information Technology at Kamla Nehru Institute of Technology (U.P), INDIA. I completed my schooling at Saraswati Vidya Mandir, Agra. I have been studying Computer Science for over six years (since my 7th grade) and am fairly proficient in general coding concepts, including data structures and algorithms. I have also good knowledge of Web Development (Front-end and backend). I am also good at competitive coding.
Where did you hear about GSoC?
I heard about GSoC from YouTube. Then I researched more about it at GSOC official website.
What other commitments do you have during the course of this program?
I don't have any other commitments in the future. I have not much workload from my college. So, my only priority this summer would be to work on this project and give my best as possible.
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)?
Not Yet , Right now my full focus is on this project. But I will also view that too.
What will working on this project mean to you?
This project means a lot to me because during this project i will learn new technologies and concepts. Whatever I will learn in this project I can use it to help other people by creating new projects. Working on this project will mean a lot to me in terms of personal satisfaction too. There's pride in knowing that my code will be part of something as amazing as Wikimedia. This project will give me the opportunity to repay back the debt I feel I have incurred from Wikimedia volunteers as a student due to my dependence on Wikipedia for my school projects. Further, working on this project will give me the opportunity to grow and bloom as a developer which inspires me to take up this project.

Past Experience

Wikimedia
I have been a part of the Wikimedia community since December 2020. I have worked on total 18 tasks from which 17 are resolved. I am aIso in CI allow list.(According to commit 676460). I am contributing for (Wikimedia/portals) from February 2021 and I have also worked on quite microtask of (Wikimedia/portals). I also have good knowledge of the workflow used in it and about its build system.

Microtasks

  1. Use non-output handlebar template comments over output ones (Merged)
  2. Wrap gulp tasks in NPM scripts to avoid global gulp dependency (Merged)
  3. Update/Fix npm dependencies for wikimedia/portals.git (Merged)
  4. Rename dev folder to src (Merged)

Other Tasks

  1. Control / middle-clicking search auto-completion results dismisses the results (Merged)
  2. The line does not return to its original position after hiding the list on wikipedia.org (Merged)
  3. Too large link's area in 'Other project' section on wikipedia.org (Merged)
  4. Border disappears very abruptly. (Merged)
  5. Rename dev folder to src (Merged)
  6. Change some icons position to center (Top-down) (Merged)
  7. rename pagegenerators.GeneratorFactory.handleArg (Merged)
  8. remove magic coding comments (Merged)
  9. Implement undo for the instant "Rotate video (Merged)
  10. Update search string when going through autocomplete search suggestions via keyboard keys (merged)
  11. Design update : Add Divider Between other portals link and sitelicense (merged)
  12. Autofix Linting error in .js and .css files. (merged)
  13. lint JS Function is not working for files in directory gulpfile.js (merged)
  14. Refactor Gulpfile.js tasks into separate files (In progress)( 672515 ,673779,674630 , 680261 , 683384)

Personal Experience

I have been studying Computer Science for over six years (since my 7th grade) and am fairly proficient in general coding concepts, including preliminary data structures and algorithms. I am also a 3-star coder at codechef. (CodeChef)
I have also good knowledge of Web Development (Front-end and backend). I have quite a bit of experience with HTML, CSS and JS having taught myself Additionally, I know basic of NodeJS, Reactjs and MongoDB.
I have made few projects which include above technologies: -
1. Premnotes
Goal of this Project is to provide Quality notes of all subjects at one place to every student during exams time. Fortunately, this website is used by 100’s of students in my college which makes me always motivated to make this project better as much as possible.
During working on this project, I have learned new technologies like ejs(templates) etc. I have also learnt to write clean code with comments so that it can be readable by others developers. Technologies used in this project (HTML, EJS, CSS, JS, NodeJS, MongoDB).

2. Responsive Page (It’s a simple responsive page with little animation) Github Repo
As we know wikipedia.org portal are majorly based on gulp pipelines build so i tried to learn them by making this simple Responsive page. In this project i have learn to write code on gulp. I have used some modules and plugins used by wikipedia.org to build this project. Modules I used in this project are:-

  • Compile-handlebar(to compile all handlebar in to single index.handlebar and convert it into index.html)
  • svgSprites(to compile all different svgSprites into a single sprites)
  • postcss(to compile all different css into one postCSS)
  • watch(to watch if any change event occures in handlebar , css and js recompile them again respectively)

3. Basic Banking System
I have worked in this website during my training-based internship. In this website, I made a demo account of 10 people with some amount balance. Functionality of this website is to transfer money from one dummy account to other dummy account. And save all transactions details.
During this project I learned to work on NodeJS and mongo DB. I also learned to host websites at different platforms. Technologies used in this project (HTML, CSS, JS, NodeJS, MongoDB).

4. Animative-Page (It's simple Animated home page)

Event Timeline

Hey @Bharatkhatri351

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

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!

The main aim of this project is that all the sister portals use the same build system and resources.

Have you asked those projects whether they want to? I suppose you're budgeting a large portion of the time for this project on communication with the stakeholders in order to achieve the necessary buy-in, but the timeline doesn't seem to reflect it.

(Also, what does the "Zulip community" bit in the timeline have to do with anything?)

The main aim of this project is that all the sister portals use the same build system and resources.

Have you asked those projects whether they want to?

Hello @Nemo_bis

According to this project T273179 we have to use same build as of wikipedia.org for renewal of the sister portals.

I suppose you're budgeting a large portion of the time for this project on communication with the stakeholders in order to achieve the necessary buy-in, but the timeline doesn't seem to reflect it.

During this period, I will remain in constant touch with my mentor and the Zulip community to discuss and finalize on the modifications of portals.Thus, with the help of my mentor I will become absolutely clear about my future goals, the final implementations

Actually i have already discussed lots of insight with mentor in past to know the project clearly.So i have design my timeline according to it.
If i required more insights for project i will contact with my mentor.

(Also, what does the "Zulip community" bit in the timeline have to do with anything?)

No Zulip community is not to do much with timeline its only for if anyone is interested to give any idea for a modification

I hope i am able to clear to your doubts if anything is unclear please let me know...