Skip to content

Instantly share code, notes, and snippets.

Last active Aug 26, 2018
What would you like to do?
Google Summer of Code 2018 project summary by Hagar Shilo

Google Summer of Code 2018 at Wikimedia Foundation: Project Summary

Final Report by Hagar Shilo

For bi-weekly reports visit my userpage schedule or my blog

GSoC Project: OOUI Tutorial Migration


The OOUI library was created by the Wikimedia Foundation, and is widely used by its developers for old and new projects. The tutorials project's purpose is to help developers and contributors step into development with the library. This project is hosted by the OOUI Demos project, as part of the OOUI Documentation. It was merged on August 13, 2018, and was included in the latest release of OOUI (version 0.28.0, August 16, 2018).

I edited, updated and redesigned an older version of a couple of tutorials that teach the basics of OOUI by building a ToDo list app, built an index page for them and moved the project to the official OOUI Demos. The new tutorials are hosted in a more accessible location than before, and they now include a very important new feature: interactive demo apps that demonstrate every step of the development process.

This project is covered by a single PR.

Work done

Due to a change of project I had to work with strict time limitations. I had to set modest goals and a realistic timeline. It worked. I completed more than I had planned.

Gerrit Link Phabricator Link Github Link Description
444389 T198845 59d1b12 Create 2 OOUI tutorials and an index page

What this PR includes

  • Design and build an Index page and a tutorial page
  • Revamp OOUI tutorial part #1: update, edit, modify
  • Revamp OOUI tutorial part #2: update, edit, modify
  • Update the library's installation instructions
  • Design demo app boxes
  • Build and embed live demo apps in OOUI and decide where in the tutorials to embed them
  • Update the both tutorials' text and ensure the text's coherence and cohesion
  • Update tutorial app code to the latest version of the OOUI stylesheet
  • Set up syntax highlighting for code snippets
  • Build a responsive page footer containing all relevant links
  • Build top bar linking to Docs, Demos and to each on the tutorial pages
  • Modify the Demos page toolbar so that it links to the new tutorials index page
  • Find and fix problems in the old version of the tutorial app code, such as time formatting issues
  • Test links and demo apps
  • Future plans

    The OOUI tutorials are currently hosted by the OOUI Demos project. In the future, they might migrate once more, and become part of a different host-project. This decision will depend on some upcoming changes that are in the works, and will also have a significant impact on the project's scalability possibilities. There are currently 2 tutorials: "Basics 1" and "Basics 2". We are hoping to make many more tutorials in the future - for more advanced functionality of the basic project, and also for particular widgets that might be more complex than others. So in terms of scalability, in the future, adding a new tutorial might be done using an API.

    I hope to stay involved with the project and keep in touch with what's going on.

    Other contributions

    Prior to working on the OOUI Tutorial Migration project, I worked on several issues in the Wikipedia filters system.


    Gerrit Link Phabricator Link Description
    439639 T191530 Use 'trash' icon instead of misleading 'clear' and changing 'remove' to 'delete' accordingly.
    440075 T192210 Align loading animation for first load later reloads
    439631 T191530 Use the trash icon in the saved filters menu
    439636 T195902 Update rcfilters-filterlist-feedbacklink to reflect the current status of the filters
    441229 T192275 Fix "Tags" padding to have it less close to the edge
    441096 T181165 CORS whitelist chapter wikis

    Under review

    Gerrit Link Phabricator Link Description
    441078 T186254 Wrap Thanks confirmation text when it exceeds the available space
    445426 T111735 Disable animation on thanks confirmation to prevent page break

    Older project proposals

    My original project proposal, User filters, got canceled (or indefinitely postponed) at an early stage, for fear that such User filters may encourage violation of the Code of Conduct, like blaming and shaming. In order not to deviate much from the original plan, I spoke with my mentors and we agreed on a new, but very similar, project proposal: Category filters. Eventually, we realized that this project was in fact too complex for the scope of a GSoC summer project, as Moriel explains here.

    Not merged

    Gerrit Link Phabricator Link Description
    435793 T190714 Refactor basic category fetch (abandoned)
    433168 T190714 Implement base group behavior (abandoned)
    435818 T190714 Edit fetchCategories and Modify setSearch to handle catrgories differently (abandoned)

    I then dedicated some time to learning the use of internal Wikimedia development tools, common work methods, code style guidelines and best practices, while taking on various tickets that needed picking up, such as bugfixes and UI enhancements (see "Other contributions"). Later on, we came up with the OOUI tutorials project, which I kept working on for the remainder of the internship coding phase.


    I would like to thank my mentor Moriel Schottlender (@mooeypoo) for her guidance and support from the registration process to the finished product. I would also like to thank my mentor Roan Kattouw (@catrope), for providing excellent technical support. And of course, many thanks to the community and staff members at the Wikimedia Foundation who reviewed my work and provided feedback, especially Volker Eckl and Bartosz Dziewoński. It's been a great learning experience.

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment