==Profile Information==
- Name: Bhaarat Kumar Khatri
- Email: bharatkhatri351@gmail.com
- IRC: [[https://wikimedia.zulipchat.com/#narrow/pm-with/372557-bharatkhatri351| Bhaarat Kumar Khatri ]]
- Github: [[ https://github.com/Bhaarat-khatri | Bhaarat Kumar Khatri]]
- LinkedIn: [[ https://www.linkedin.com/in/bhaarat-kumar-khatri-76354118b/ | 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).
==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.
|{F34217258} | {F34217257}|
**2. Search Box**
- New layout of search box
- Search suggestion layout with better dimensions
- user friendly language selector.
|{F34217266}|{F34217267}|
**3. languages by article counts in dropdown**
- A dropdown feature to make improve UX.
- All language structures in well mannered.
|{F34217410}|{F34217411}|
**4.Footer**
- Other project sister link with some descriptive tags.
- Redirecting link to download wikipedia from playstore and appstore.
|{F34217459}|{F34217457}|
**5.Mobile View**
- Better UI/UX for Mobile.
|{F34217468}|{F34217467}|
==Flowchart==
- This is a predicted flowchart of future portals.
- Potential changes can be done according to mentor guidance.
{F34363685}
==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 [[ https://khatriblogs.wordpress.com/ | blog ]] where I will write about my work on this project once every two weeks. This blog will help us in three way
# It will help mentor to track my current progress.
# It will help me to update my documents.
# 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 **
| Period |Week No|Timeline (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|
|Period|Week No|Timeline (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 15 tasks from which 12 tasks are resolved. I am contributing for **(Wikimedia/portals)** from February 2021 and I have also worked on quite a microtask of (Wikimedia/portals). I also have good knowledge of the workflow used in it and about its build system.
# [[ https://phabricator.wikimedia.org/T209010 | Use non-output handlebar template comments over output ones ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T194134 | Wrap gulp tasks in NPM scripts to avoid global gulp dependency]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T219917 | Control / middle-clicking search auto-completion results dismisses the results ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T262658 | Update/Fix npm dependencies for wikimedia/portals.git ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T255929 | The line does not return to its original position after hiding the list on wikipedia.org ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T255711 | Too large link's area in 'Other project' section on wikipedia.org ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T277503 | Border disappears very abruptly.]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T278035 | Rename dev folder to src ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T270403 | Change some icons position to center (Top-down)]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T271437 | rename pagegenerators.GeneratorFactory.handleArg]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T270946 | remove magic coding comments]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T264503 | Implement undo for the instant "Rotate video ]] **(Merged)**
# [[ https://phabricator.wikimedia.org/T279994 | Update search string when going through autocomplete search suggestions via keyboard keys ]] **(open)**
# [[ https://phabricator.wikimedia.org/T279067 | Design update : Add Divider Between other portals link and sitelicense ]] **(open)**
# [[ https://phabricator.wikimedia.org/T277405 | Refactor Gulpfile.js tasks into separate files ]] **(In progress)**( [[https://gerrit.wikimedia.org/r/c/wikimedia/portals/+/672515/ | 672515 ]] ,[[ https://gerrit.wikimedia.org/r/c/wikimedia/portals/+/673779/ | 673779 ]],[[ https://gerrit.wikimedia.org/r/c/wikimedia/portals/+/674630/ | 674630 ]] )
**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. ([[ https://www.codechef.com/users/bhaaratkhatri2 | 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.** [[ https://premnotes.herokuapp.com/ | 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.** [[ https://bhaarat-khatri.github.io/ResponsivePage/| Responsive Page ]]** (It’s a simple responsive page with little animation) [[ https://github.com/Bhaarat-khatri/GulpBasedResponivePage | 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 in **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 svgSprities into a single spirites)
- **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.** [[ https://bankingwebbykhatri.herokuapp.com| 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 worked 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.** [[ https://bhaarat-khatri.github.io/AnimativePage/ | Animative-Page ]]** (It's simple Animated home page)