User:Mooeypoo/User script demos

One of the most straight forward ways to get into development in Wikimedia projects is through user scripts. User scripts are JavaScript/CSS code that lives in the user space (under your username) and execute on the wiki for the user only. Since the scripts are public, they can also be shared between users and between wikis, and the scripts can range from super simple to fairly complex bits of software.

You can read more about user scripts and gadgets in the gadget kitchen page.

Since user scripts are a great way to get into (and be introduced to) the Wikimedia developer community, I've collected a few demo scripts as a showcase. They're organized by topic and basic elements that are used so you can look and play around with user scripts according to your comfort level.

How to use these demos
These scripts are meant for demo purposes. The best way to learn is to experiment!

To use and experiment with these scripts, follow the instructions in the gadget kitchen page.

Quick instructions:
Now you need to load the script so you can see it work and experiment with it: visit Special:MyPage/common.js. This file holds your personal JavaScript that is loaded on every page view. If there is a CSS file to your user script, you need to create it first: PLEASE DO NOT CHANGE THE ORIGINAL DEMOS. If you want to play around and change the code, copy it first and change the copy.
 * 1) Ensure you are logged in.
 * 2) Create a subpage for the script you want in your user page. For example,
 * 3) Copy the code from the script you are interested in into that page and save it.
 * 1) Visit Special:MyPage/common.js (This is where you put all JavaScript that will be executed on the wiki when you're logged in)
 * 2) Load the user script code by adding this line:     For example:
 * 3) Load any article in that wiki to see the script in action. Now you can edit the script (edit the one you copied!) and see how it works!
 * 1) Create a new page for your css styles at
 * 2) In your JavaScript page, include the link to your CSS:    For example:

Contributing to this list
If you have another demo to add to this list, please feel free to do so. If you do, please try to follow these rules:
 * The code works out of the box! These are meant to be quick and working demos. Don't share a demo you haven't tested, or one that doesn't work or creates console errors. These will just confuse people who aren't well versed in JavaScript and MediaWiki.
 * All code must be documented thoroughly.  These are demos, for the purpose of learning. Please make sure your code is properly documented as a tutorial.
 * Everything must be legal and ethical. Don't do anything that is against wiki policies, common sense, and ethical behavior. If you have doubts about something - don't do it.
 * Document what the script is demo'ing and using Try to make sure you properly document what the script uses (what elements of code? is it just jQuery or are you using ResourceLoader modules? API? etc)  This will make sure people can choose demos that fit their level and not drown in complex examples if they are not ready for them.
 * Name your script properly! Use a descriptive name for the demo user script for clarity.
 * Don't go overboard: consider your audience These demos are for people who start out development in Wikimedia user scripts. Some may come with knowledge in JavaScript, some may have much more basic knowledge.  If your demo idea can be super simple but also have a complex versoin, consider splitting it to two so both target audiences (and users from varying experience levels) can gain from them.

Demos
This is a list of user script demos.

'Please don't change the original script! If you want to play around, copy the script to your own user page and change it there.'

Demo suggestions / requests
Here you can suggest demos to feature so we have a sort of "TODO" list to implement. These can be about specific concepts (how to use a module, how to request information from the API, etc) or about a cool general script idea to implement or do.

The ideas and suggestions should also follow the rules in "Contributing to this list" section above.
 * Have a gadget using "advanced" mw.msg utilities like PLURAL and/or GENDER
 * Showcase using user preferences using mw.user.options.get( ... )
 * Create a demo for ResourceLoader modules (mw.loader.using)
 * Your idea ...

More resources

 * Gadget kitchen
 * English Wikipedia's User Scripts tutorial