User:Jeblad/Gadget development

This page grew out of frustration over the present gadget development environment. Development of gadgets for the Wikimedia sites either pesters other users with lots of small updates, which often breaks the gadgets, or the developer must set up locally a very large and potential confusing development environment. Much of the development of gadgets does not require a full gadget testing environment. If it is necessary then it can be done at one of the deployment sites, for example the English beta wiki.

Minimum dev environment
As much as possible of the development should be done locally. Do not pester your coeditors unnecessary! Small iterations should create a new stable gadget, like in a SCRUM cycle. This is not possible without some tweaking of your development environment.

Greasemonkey
One solution is to use Greasemonkey to intercept requests to Wikipedia, or whichever Wikimedia site you want, and then load replacement scripts or extra scripts from localhost. This is the primary enabler for local development.

Greasemonkey can be used for full development of scripts, but the scripts created this way is not quite what we want. The environment has also some quirks that make them less portable, and the environment is also somewhat fragile.

It is very straightforward to set up Greasmonkey for Firefox. Go to the download page on the Add-Ons site and "Add to Firefox".

A user script can then be created for each project, pointing to a directory on our local machine, like the following


 * Loader script

At some point it will probably be necessary to tweak the include andd exclude rules in Greasemonkey.

Web server
It is necessary to have a local web server, as using local files creates a lot of trouble. Ideally the webserver should deliver HTTPS, but is does not create any big problems to allow mixed content. If this does create problems, then one solution is to set up a special profile for development work. Another solution is to add the necessary packages to HTTPS.

Any web server works, like Httpd, Nginx, or Lighttpd, as long as it can deliver a local file on localhost. For this specific use we don't need anything really fast, but we need some way to limit access as it will run on a local computer.

Example
As an example a directory  can be set aside as a semi-public place for development. In our previous example there is a directory  with a style file   and a script file. For testing purposes two small files like the following can be put in the directory.


 * style.css


 * script.js

Medium dev environment
To make a a somewhat more functional environment we can add a testing facility to the environment. Because we

QUnit

 * QUnit: Introduction to Unit Testing
 * GitHub: jquery/qunit
 * Mozilla: Console


 * Loader script

Source map

 * CSS source map support, network performance analysis & more – Firefox Developer Tools Episode 29
 * Live Editing Sass and Less in the Firefox Developer Tools

CSS

 * Sass
 * Less
 * Stylus
 * SCC-Tricks: Poll Results: Popularity of CSS Preprocessors
 * Live Editing Sass and Less in the Firefox Developer Tools
 * CSS Panel

Firebug

 * Software is hard: Firebug Tip: include command

Annoying stuff

 * Extension:CentralNotice
 * Extension:CentralNotice/Special:RecordImpression
 * Special:RecordImpression should die in a fire