A modern, scalable and attractive skin for MediaWiki

Public URL: https://www.mediawiki.org/wiki/User:Jack_Phoenix/A_modern,_scalable_and_attractive_skin_for_MediaWiki_(GSoC_2014_proposal)
Announcement: announcement posted to the wikitech-l mailing list

Name and contact information

Name: Jack Phoenix
Email: jack@countervandalism.net
IRC or IM networks/handle(s): ashley on irc.freenode.net
Web Page / Blog / Microblog / Portfolio: my MediaWiki.org user page and the subpage detailing some of my MediaWiki contributions
Location: Turku, Finland
Typical working hours: 2PM-11PM (UTC+2)

Synopsis

MediaWiki's selection of skins (which other projects call "layouts" or "themes") is rather poor with only around 30 custom skins available as of the time of writing. In addition to the shortage of options, many of these skins are outdated and not maintained. Other free and open source projects like phpBB or WordPress have hundreds, if not thousands of custom skins to choose from. As a result of this, many wiki sites out there that use MediaWiki look like Wikipedia — either how it looks today, or how it did five or ten years ago.

No matter who or what you are, visual identity is important. A site should be easy to use and look fresh and modern. Therefore I plan on building a modern, scalable and attractive skin for MediaWiki based on wikiHow's current default skin, which is available under GPLv2. The skin, tentatively named BlueSky, will feature elements of modern design, including a fixed personal header with descriptive icons. The target product will be fully functional on less powerful or older devices and browsers, such as mobile browsers and Internet Explorer 8.

Much like many WordPress themes, the skin will also provide some different color schemes and other CSS customizations (themes, as they're called in the MediaWiki world) for site administrators to choose from. This is something that no core MediaWiki skin currently provides, despite being an easy way to visually distinguish your site from all the other sites that use the same underlying software.

Possible mentors: Isarra, Emufarmers

Deliverables

Skin that
- "looks and feels" similar to the current default skin on wikiHow
- supports standard MediaWiki features
- runs without any modifications to the MediaWiki core software
- works on the latest stable version of MediaWiki (1.23)
At least three pre-defined color schemes (themes) in addition to the standard "look & feel" of the skin

Schedule

Week of	Task	Notes
(Before May 19)	Request the creation of the git repository on MediaWiki.org Research into extension dependencies — what extensions does the skin need to work as intended? What of these could safely be dropped (i.e. site-specific advertising support), what require more thinking?
May 19	Have initial directory structure and files in place Add initial ResourceLoader support Run stylize.php to ensure the resulting code follows our coding conventions Get rid of site-specific branding in the files (filenames, CSS classes/IDs, etc.)
May 26	Ensure that the skin works on a vanilla installation of MediaWiki and is able to be used for both basic user and administrative tasks Add proper internationalization (i18n) support
June 2
June 9	Develop test cases for different scenarios to ensure that all standard MediaWiki features are adequately supported (i.e. the orange "You have new messages" bar, etc.)
June 16	Customizability: remove various hard-coded elements in favor of greater customizability in the fixed header Features: provide a notification system to notify the user about new talk page messages, likely by integrating wikiHow's Notifications extension
June 23	JavaScript consolidation and cross-browser testing
June 30	Themes: implement PHP back-end support for themes Themes: write default themes for (at least) three different color schemes
July 7	Reserved for code review, design discussion and whatever unexpected things might come up.
July 14	Reserved for code review, design discussion and whatever unexpected things might come up.
July 21	General codebase cleanup Try to document the parts of the codebase that haven't been documented by this point
July 28	Make sure that the output is valid HTML (on a vanilla MW installation with no funky extensions installed) Printable CSS tweaks, if needed Write developer and end-user-facing documentation on MediaWiki.org
August 4	Final code reviews and codebase polishing in accordance with code review comments.
August 11	Tie up the loose ends, in case if there are any of those.

Participation

For optimal transparency, I plan on writing daily reports on a user subpage on MediaWiki.org (such as User:Jack Phoenix/GSoC 2014/Week 24 to cover the progress made between 9 June and 15 June 2014). A weekly summary can be emailed to the wikitech-l mailing list for wider distribution.

Code will be published on Wikimedia's git server and I aim to request the creation of the repository well in advance to allow for some unexpected delay. If, however, the creation of a new repository on git.wikimedia.org should turn out to be impossible for one reason or another, GitHub or Gitorious will be used as a backup.

If and when I stumble upon obstacles, I'll first ask my mentors for assistance, and if they're not able to answer the particular question or questions I may have, I'll ask the #MediaWiki IRC channel or the wikitech-l mailing list.

About you

I'm a student at the University of Turku, studying for a Master of Arts degree. Besides that, I'm a developer who's passionate about using the currently available technologies to deliver the best possible experience to the end user. This project aims to benefit any and all other users of MediaWiki who are looking to personalize their sites and make them stand out from the "gray mass" of wikis running MediaWiki out there.

How did you hear about this program?

I was a mentor in 2011, after I saw the announcement posted to the wikitech-l mailing list. A couple of my friends suggested that I should participate as a student this year.

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

I don't have other arrangements that I'm aware of at the moment.

We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?

No.

Past experience

Please describe your experience with any other FOSS projects as a user and as a contributor

MediaWiki developer since May 2008 with specific focus on skinning
Senior Software Engineer at ShoutWiki since 2008
Software Developer for Uncyclopedia since June 2012
Volunteer developer for Brickimedia since November 2013

Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them (include links)

Cleaned up several MediaWiki skins built by third parties (Wikia, wikiHow) that had complex dependencies on said external parties' custom codebases (Bubbles, HowTo, Monaco, Quartz)
Built a modern skin (Aurora) from a few mock-ups; see the Aurora skin in action
Implemented and tested a modern sidebar parser for a skin that featured no user-editable sidebar
Cleaned up invalid HTML to make the skins' output valid HTML
Reverse-engineered several skins without access to the original PHP code to produce identical output
Ported several WordPress themes into MediaWiki skins (Bouquet, DeskMessMirrored, DuskToDawn, Gamepress)
Implemented Internet Explorer fixes for the Refreshed skin, added better internationalization (i18n) support, tidied up the codebase

My GitHub user profile might be of some interest.

What project(s) are you interested in (these can be in the same or different organizations)?

This project, mainly; skinning is a rather esoteric area of the MediaWiki codebase and the bus factor with the skin system is high. Completing this project would provide a useful, modern and fully cross-browser-compatible skin for users not satisfied with MediaWiki's limited supply of default skins.

Any other info

wikiHow source code distribution site — the code that I'll be using as my base