Code

While I do mainly user research I do a bit of programming too.

Most is on github under a liberal license and JavaScript, though it is possible that you see also a bit of HTML, CSS, LESS or even a bit python or R.

quickMockup

Code on github

Try the quickMockup Demo

quickMockup screenshot Image: quickMockup screenshot

QuickMockup is a simple tool for creating simple mockups of interfaces and websites. It is HTML based and javascript-enhanced. The target group are interaction/interface designers or design-aware developers who take part in open source projects and need to communicate their ideas.

Mediawiki Upload and Insert Images

Download and see the code on github

working implementation

A JavaScript which hooks an image upload dialog into the wikieditor’s toolbar.

It was created because…

  • The wiki's admins had trouble with illicit uploads (»Look what I scraped from google images!«),
  • the users had trouble inserting images in general – uploading meant going from editing (»I need an image here«) to the upload form, then remembering the image's name and then going to insert that name in proper syntax in the wikitext.

The little script allows to upload an image while being in the editing view and automatically inserting the proper command. Thus use of images is greatly eased. In addition, the user is asked some questions about the images origin. It warns the user if an upload is probably illicit. It helps choosing a license as well.

Mockup Theme

Download – you probably want the theme itself (box icon) , not the source (zipper icon) browse the code on github

BootstrapMockupTheme

A sketchy looking theme for bootstrap for prototyping in code and showing that the design is not-yet-finished (hopefully preventing »but my grandpa does not like that green«-comments)

Visual Bug Reports

Download and see the code on github

VisualBugs

A bug reporting tool for non-IT-people. It allows

  • taking a screen shot of a website,
  • drawing in the screen shot to highlight parts or to anonymize them
  • writing a bug description
  • sending the screen shot and the annotations to the developers

– Everything via a bookmarklet. The user activates it and the dialog and drawing tools appear (and go away again as soon as "cancel" or "send" are clicked) . There is no installation of apps, extensions, whatsoever needed. The server side code is tiny, a .htaccess and a few lines of code (currently PHP) are needed (they are in the repo, too).

Autocompletion for etherpad

Download and see the code on github

autocompleter

This plugin gives you autocompletion in etherpad – which is useful when coding or if you find yourself typing lengthy words. It has its origin in some experiments with collaborative data analysis and coding (data analysis »coding«) but for most people it is probably useful for coding (the programming »coding«).

Got even more awesome (and has less of my stupid errors) with help from Luzia and Joas