Flavien Bossiaux

Improving UX of GMOD

Reports

I want to apologize for language mistakes, I'm not a native speaker but I hope that it's still understandable.

Week #38 (16 August - 22 September)

Add things to documentation.

Finish the Nabble widget (which was on pending).

Writing of these reports.

Continue the minifixes.

Week #36 - #37 (2 September - 15 September)

I just arrived in Canada and I had tons of things to do (official papers, settling, university orientation, ...) so I didn't work.

Week #35 (26 August - 1 September)

I continue working on minifixes.

I stop working because I needed to prepare my travel to Canada where I will study for one year.

Week #34 (19 August - 25 August)

I continue to search for responsive menus ideas.

There was a little work to do on the toolbox where I already had trouble at first.

I get the mockups of the skin and start converting all the .less files into .sass ones and code the skin using Foundation.

Start doing some minifixes and debugging.

I clean the Trello Board.

We thought that MW must need a CSS clean for optimization and performance (according to chrome inspector, 81% of the CSS code is not used on a simple page).

Week #33 (12 August - 18 August)

MMenu plugin works well for mobile view but there is much trouble for the desktop view. Because it use JS, I can't use mediaqueries on it.

I found a css for desktop view, but as I custom the original one, the wide screen css doesn't work properly.

There is still the resize problem. And I spend few days on it. I asked for the next plugin specifications because I had to make a pause about this bug.

We discussed more about the feedback plugin.

I get feedback about the mardown of the little plugins readme and about the mendeley widget.

We decided to give up the feedback plugin in order to focus on the skin which become the main things of the project.

It misses bits of skins in the current one. That's where we decided to redo the existing skin.

I search ideas for responsive huge menus like in MediaWiki while waiting mockups.

Quickfix on MediaWiki useful classes.

I propose to redo the whole skin using the responsive html framework 'Foundation' which will be more easily maintainable, customizable, and provide tools for make the content of the MW responsive (and not only the MW itself). And it make sense because what a responsive MW if the content is not?

We split all the MW bits in single pieces to identify the one we will choose and how integrate them for a new skin.

Week #32 (5 August - 11 August)

We are still thinking of the desktop version of the menu.

I made changes on the mobile version of the menu by using different level of menu.

The mobile version was working, but I had issue I spent a lot of times for the desktop version. Once the mobile version initialized (by having a screen with less than 900px wide, it switch to mobile view), then even if you resize to a 900+ px wide, it was still mobile.

Week #31 (29 July - 4 August)

We finally get through the span with negative margins, null font size and other css tricks.

We decided to test the beginning of the project on the dev server to see issues with GMOD content.

I started the Mendeley Widget, and how it generates the embedding snippets.

My mentor makes me really happy by letting me continue the GSOC adventure ! I'm so happy about first evaluations ! I'll do my best for the next one !

I had an issue with links I hardcoded in French, so I i18n it.

We thought about the desktop version of the menu.

I release the first version of the Mendeley Widget.

Week #30 (22 July - 28 July)

My mentor gave me a font but only in bold version, so I wasn't able to use it for plain text of the content. That's why I decided to use, according to the Android icons, to use the Android font : Roboto. I also love this font too, that's why I used it.

I plan to vectorize all the Android icons with Inkscape but it's not yet done, I prefer focus on more important things.

I first use the jPanelMenu plugin for jQuery to use an off-canvas sliding menu as on famous mobile app like google+ or facebook for example. The problem was that the plugin doesn't allow to display the menu by sliding with fingers and don't use hardware accelerated animation which looks pretty laggy on my mobile devices.

I was not able to choose the colors, but my mentor help me and it was very great !

Then I finish the menu, and I was pretty satisfied by the way it looks on mobile devices. I made lot of screens to show to my mentor how it display on my Nexus 4 and iPhone 3GS.

I heard things about panels in jQuery mobile, and then I tried to adapt my menu with this plugin, but it changes too much things to be adapted on existent work.

Few days later, during my forecasting, I discover a new jQuery plugin that is much much better : mmenu because the animations are hardware accelerated, very modular, and, with hammer.js, permit the use of "slide to reveal".

During this time, I done the content CSS and pay attention on what informations is needed, especially on how to display the summary part wich could be very long if expanded.

I also done the login form by making it responsive and easy to use.

I finally decided to install mmenu (I just discover it few days before, but I did'nt use it, preferring to focus on more important things). It brokes a lot of my CSS (because it has a default style css, custom classes...). It remains to clean the code because I have some duplications.

I also start the "edit" view of MediaWiki, but don't yet find how to deal with a span with hardcoded symbols that I don't want to be displayed anymore.

Week #29 (15 July - 21 July)

I make some mockups using Gimp to show a first and non functionnal version of the website before starting coding it. I was inspired by the mobile version of Wikipedia and the mobile version of WikiHow (where I find a very useful tutorial about MediaWiki skinning.

I set up the foundation of the MediaWiki skin using the official documentation.

I first made an empty skin just saying "Hello World" with an image.

I install Node.js for learning how to use LESSCSS. Then I read the documentation of LESS. All the CSS of my skin is generated from LESS.

I decided to use the Android icons because they are open source, and works well because it's Google Summer of Code !

I have troubles with the search bar where I had some CSS wierd things. I would like a CSS property like "fill the remaining space" wich could be pretty useful. I had a block which was shifting down without margin / padding / border... I also had some things wierd like 50px height with 7px padding which made 50+7+7 = 64px, and the computed height was 68px.

I decided to use normalize.css in order to have the same render in most of browsers.

I set up a MediaWiki on my personal host for testing on mobile (Nexus4 and iPhone 3GS), and also make a back up, and let my mentor see how it goes.

Week #28 (7 July - 14 July)

I read tons of things about skinning, and I search original ideas before searching what other peoples had done.

Then, I found things (responsive) already done (using twitter bootstrap) and other extensions (non responsive)

I decide to do a "mobile first approach" for the skin, and then I search original ideas, but all the things I thought had already done by others.

Week #27 (1 July - 7 July)

After reading the specifications, I read a lot of things about coding extensions, and how works others feedback extension.

Finally, the original extension made by MediaWiki Foundation is good enough for gmod, but it seems that we'll change the specifications.

We decided to switch and go for starting to code the skin. I started to read things on skins.

Week #26 (24 June - 30 June)

My mentor had already done a MediaWiki extension for embedding content : WikiTwidget for embedding twitter widget in MediaWiki. They were very similar so I decided to modify her extension and not coding from scratch.

I wrote the first version of iAnn, based on this snippet and started debugging it.

In the same time, the download of all the GMOD data finished (I live in the country, and my connection is pretty slow, between 50 and 80kB/s).

I had problems to load remote ressource with RessourceLoader because it concatenates the beginning of my local URI with the remote URI, and then I had 404 errors with URI like //localhost[...]/http://[...]

I decided to download remote ressources to set them as local ressources.

I also had troubles with the maps part of the widget, and while I was searching how to fix it, I found another way to implement the widget.

Implementing this snippet instead of this one is easier, and easier to update becaue it's an iframe and if iAnn update is library, we don't have to. On the other hand, download the libraries allow the user to customize the widget. My mentor said the iframe was a better bet from a maintenance perspective because it's much easier if we don't have to check the iAnn site to see if they have updated their code.

I tidied the Trello Board with little tasks by archiving some of them.

Once I understand how to deal with GitHub (I never used it, I used Bitbucket and other Atlassians tools), with the coding of iAnn widget, I code the Storify one.

I thought about how to implement the Nabble widget when we had to revise the schedule in the light of how I worked on the first extensions.

I've a lot of troubles for implementing the Nabble widget. It works with my own MailingList, but I have not yet found the solution, and we decided to leave it aside for the moment.

I also had to make sort of public face for the GSOC project so that it can be tracked and interested people can see what's going on. That's why I created this website (It's not already finished, but I'm working on it. I also created a twitter account for my instant feelings about the project.

I'm supposed to get the specifications of my first "big" extension (the feedback one !) on Monday.

Week #25 (17 June - 23 June)

I was moving from my student residence to my house so I started working on Tuesday.
In this term, I learn the basics of agile development and really appreciate the Kanban board.
That's why I propose to my mentor to track my work through a Trello board instead of making daily reports and let her track exactly what I'm doing, if I'm stuck or if some tasks are quicker than expected. The board is private because we think people doesn't need to know the details of every little tasks.

I create a google doc with the schedule from the proposal.

While reading documentations about extensions, in order to understand examples and code from other people, I also read documentation about how install a local version of MediaWiki.

I tried to install httpd, pcre, php, etc... but I give up when I learn that MediaWiki is running great on Xampp (Lampp for me).

I choose the latest version of MediaWiki (1.21.1) but my mentor told me that there might be some compatibility issues, and it's better for me to work on the 1.19.2, the current version of GMOD MediaWiki.

We also talk about useful tools for the last part of the project : the skin. She advise me to use LESS CSS compilator and to learn how to use it.

I tried to create a GMOD account using my Google account as an OpenID one, but it doesn't works. I recieve my account on the dev server, and I copy to my local computer the GMOD MediaWiki and database.

I started little things on my local version of MediaWiki (like changing the logos, etc...).

Once everything set up, I thought about how implement the iAnn widget thanks to all the things I read on how to make extensions. I was stucked on how add ressources in the header tag of the page, and my mentor help me by telling me to use the RessourceLoader.