Re – Designing LCMD – Introducing the New User Interface


I have been spending the last few days re-designing the User Interface of Language Coverage Matrix Dashboard. Although the last one was working smoothly, there was a need of more polished and efficient one than the previous. I met up with my mentors and the designer of our Language Engineering team a number of times to decide on the new UI.

So, let’s walk through the newly added User Interface of LCMD!

Now to begin with, I would like to mention what exactly demanded a new UI here. The issue with the previous one was as simple as: It demanded to show more details and also, the informations needed to be grouped.

About the new UI:

We have a few new features and a few useful changes here in the new UI. Which are basically listed as,

  • Data grouped in Universal Language Selector, Project Milkshake, Legacy Extension and More Info of that language.
Screen Shot 2013-07-28 at 3.56.33 AM

The new options

  • This grouped data is shown in responsive and smooth drop down.
Screen Shot 2013-07-28 at 3.57.06 AM

Dropped Down version of the options

  • New switch button is introduced for more efficient editing by the admin.
Screen Shot 2013-07-28 at 3.57.47 AM

Switch buttons

  • New modal design created to update the information of languages.
  • Icon cross and tick are added for showing language support.
Screen Shot 2013-07-28 at 3.56.46 AM

The cross and tick!

This is all about the new UI that we have right now! 🙂

Wikimedia Tool setup for LCM-Dashboard (GSoC Project)


Wikimedia tools login screen using ssh

Wikimedia tools login screen using ssh

wikimedia tool setup is very tedious work but #wikimedia-labs helps a lot.

After creating an account and being approved by admin. You will log in to your tool using this command.

ssh -A username@tools-login.wmflabs.org

After logging into your tool you have to use following command to switch to your service

become toolname

Now this have following things

  • public_html – where you can place your html, php, css, js

  • cgi-bin – where you can place your python script etc

  • replica.my.cnf – contains username and password

Now Creation of databse for your project

In the first step you have to find you username and password by using “” file.

After that your database name must be USERNAME__DBNAME (2 underscore)

mysql --defaults-file="${HOME}"/replica.my.cnf -h tools-db 

after that MariaDB console will open and in that you can create databasw

MariaDB [(none)]> CREATE DATABASE USERNAME__DBNAME;

you can access this database by using this command

mysql --defaults-file="${HOME}"/replica.my.cnf -h tools-db USERNAME__DBBAME

If you want to connect the database to your project

host = tools-db
uname = your_username
pass = your_password
dbname = USERNAME__DBNAME

Then you can push the file to remote using git via clone or you can use scp command to push files from remote to local like this

scp <files> USERNAME@tools-login.wmflabs.org:/data/project/<tool-name>

Hope it will help you 🙂

Link of my tools on wikimedia labs : lcm-dashboard