Page MenuHomePhabricator

Google Summer of Code 2021 Proposal - Updating the Front-End of Wikimedia Projects
Closed, DeclinedPublic

Assigned To
Authored By
Alitar2
Apr 13 2021, 4:48 PM
Referenced Files
F34377387: image.png
Apr 13 2021, 4:48 PM
F34377376: image.png
Apr 13 2021, 4:48 PM
F34377346: image.png
Apr 13 2021, 4:48 PM
F34377381: image.png
Apr 13 2021, 4:48 PM
F34377395: image.png
Apr 13 2021, 4:48 PM

Description

Profile Information

Name: Ali Tariq
IRC nickname on Freenode: alitar2
LinkedIn Profile: https://www.linkedin.com/in/ali-tariq12/
Resume: https://drive.google.com/file/d/1w1EOjMlfUGbWkRRrIGVOuukiG0dOCynF/view?usp=sharing
University: National University of Sciences and Technology, Pakistan
Country of Residence: Pakistan
Typical working hours (include your timezone): 9am - 5pm (PKT - Pakistan Standard Time, UTC+5)

Synopsis

The Wikimedia Foundation, famous for being the organization behind the popular informational website Wikpedia, also manages many other websites pertaining to different types of resources, like Wikiquote, Wikisource and Wikibooks. The management of these websites is an arduous and ongoing task with consistent updates to the information on the pages of these websites, as well as refinements to the user interface.
Before, these websites were built using a series of scripts found on ‘meta.wikipedia.org’. Recently in 2016, the code for the Wikipedia website was moved from this approach into a Git repository utilizing Mustache templates and a build step to generate the final HTML page. However, the other websites under Wikimedia’s management, like the ones we mentioned earlier, have not been migrated to this method and are still being generated with the old method, leading to inconsistencies in managing the pages and a hurdle for the organization that can be simplified.
Hence, my project at hand will mainly focus on converting these pages into HTML templates so that they can run through the same build-step as the Wikipedia website. With this, we can simplify the workflow for the organization and make it easier to manage these pages in the process.
For this project, I will be utilizing skills in HTML and CSS syntax as well as Handlebars templates, JavaScript, Node.js scripts and a build-step powered by Gulp.js. I hope to make this endeavor not only a meaningful affair, but a comprehensive learning experience that can bring value to open-source projects like this one.

Mentors for this project: @Jdrewniak

Tools and Technologies

• Semantic HTML
• Semantic CSS
• Handlebars Templates
• Less CSS
• JavaScript
• Node.JS Scripts
• Build-Step powered by Gulp.JS

Deliverables/Project Timeline

PeriodActivity
17th May – 23rd MayGet to know the community more, bond with mentors, admins, and developers.
24th May – 29th MayGetting familiar with codebase (HTML Templates, CSS, JavaScript).
30th May – 6th JuneRead about Gulp Build System and familiarize ourselves with plugins used in the codebase.
7th June – 13th JuneCoordinate with our mentor to discuss and finalize the modifications of the Wikimedia portals. The goal is to become absolutely clear about our goals and the final implementation.
14th June – 27th JuneStart working on modernizing wiktionary.org portal.
28th June – 11th JulyStart working on modernizing wikiversity.org portal.
12th July – 16th July(Phase 1 Evaluation)
17th July – 26th JulyStart working on modernizing wikibooks.org portal.
27th July – 5th AugStart working on modernizing wikiquote.org portal.
6th Aug – 15th AugStart working on modernizing wikinews.org portal.
16th Aug – 23rd Aug(Final Evaluation)

Implementation Details

Our project focuses on improving the User Interface of different Wikimedia portals, in order to make their Front-End as easy to use and engaging as Wikipedia.org.
Wikimedia portals that we wish to modify include:

  1. Wikiquote.org
  2. Wiktionary.org
  3. Wikinews.org
  4. Wikibooks.org
  5. Wikiversity.org

The current UI of Wikipedia is as follows:

image.png (675×775 px, 191 KB)

UI of Wikiquote.org and Suggested Changes:

image.png (253×303 px, 36 KB)

1- Create a modern UI for the Top 10 Languages.
2- Remove caption (e.g. For English, remove “Collection of quotations”).
3- Change Font styles.

image.png (224×349 px, 41 KB)

1- Modify the layout of search bar.
2- Enhance UI of search options.
3- Include an easy-to-use language selector.

image.png (246×305 px, 54 KB)

1- Create a dropdown for reading articles in different languages.
2- Modify display of articles available in different languages.

image.png (245×433 px, 35 KB)

1- Add descriptions for Icons in Footer.
2- Add links for downloading Wikiquote from the Google Play Store, and the App Store.

Participation

I will communicate my progress regularly and ask any questions if required on Zulip and email and will be available on all these channels promptly for any updates that may be required from the mentor's side. I will publish the source code and any further revisions and improvements on GitHub.

About Me

  • My education (completed or in progress)

I am currently a third year Bachelors/Undergraduate student in Software Engineering at SEECS, NUST, Pakistan. I completed my A Levels from Beaconhouse in Islamabad as well. During this course, I have learned and gained experience in various aspects, like the Software Development Life Cycle, advanced programming concepts, Web Development, Database Design and Machine Learning.

  • How did you hear about this program?

I heard about this program from social media, development communities and forums and one of my faculty teachers this semester, who particularly encouraged me to apply.

  • Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

I may have an internship or two in the summers this year but other than that, I will be fully available for this project if selected. If I do face any unforeseen personal commitments, I will make sure that I communicate it to my mentor well before time.

  • 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 do plan on applying for both programs. For Outreachy, I would preferably like to work with organizations in the Web Development domain like Mozilla.

  • What does making this project happen mean to you?

For me, this project is a way to break further into the vast world of open-source, and actually make a difference with my efforts as well as exploring my horizons.

Past Experience

  • Describe any relevant projects that you've worked on previously and what knowledge you gained from working on them.

I have worked on various projects in domains like Web Development, AI/ML and Data Science using languages and technologies like Python, JavaScript, React, Flutter, Java and MySQL. Some of these include a Pharmacy Management System, a multi-threaded multi-server HTTP downloaded and a cross-platform Flutter app for student communication. With each of these, I learned skills like translating logical concepts onto code in the most effective way, effective debugging and how to work in programming as a team.

  • Describe any open source projects you have contributed to as a user and contributor (include links).

I have not contributed to many open-source projects so far, and I am looking forward to GSoC being an outlet where I can break into this field effectively with the right mentorship and resources.

  • You must have written a feature or bugfix for a Wikimedia project during the application phase (see the section about microtasks in the application process steps), please link to it here. We give strong preference to candidates who have done so.

I looked into the microtask 'Refactor Gulpfile.js tasks into separate files' (T277405) to understand the Gulp.js build system and to gain confidence in whether I possess the appropriate skillset for this project or not.

Event Timeline

Alitar2 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!

Gopavasanth subscribed.

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