badsyntax

function FancyThing(options) {
  this.message = 'hello';
  this.options = options;
}
FancyThing.prototype.doSomething = function() {
  // yea, don't do this:
  this.options.callback.call(this);
  // this is better:
  // this.options.callback(this)
};

badsyntax

#!/bin/bash
# 
# Initialize new virtual server using LXC and set up networking and HTTP proxy
#
# Written by: Deni Bertovic <deni.bertovic@dobarkod.hr>
#
# Released into Public Domain. You may use, modify and distribute it as you
# see fit.
#
# This script will:

badsyntax

var View = require('atom').View;

/** CofeeScript's version of inheritance */
var __hasProp = {}.hasOwnProperty;
var __extends = function(child, parent) {
  for (var key in parent) {
    if (__hasProp.call(parent, key)) child[key] = parent[key];
  }
  function ctor() { this.constructor = child; }
  ctor.prototype = parent.prototype;

badsyntax

var Base = module.exports = function(db) {
    this.db = db;
}

Base.prototype.extend = function(properties) {
    var Child = Base;
    Child.prototype = Base.prototype;
    for(var key in properties) {
        Child.prototype[key] = properties[key];
    }

badsyntax

var Model = function(db) {
    this.db = db;
}

Model.prototype.extend = function(properties) {
    var Child = Model;
    Child.prototype = Model.prototype;
    for(var key in properties) {
        Child.prototype[key] = properties[key];
    }

badsyntax

var request = require('supertest')
  , express = require('express');

var app = express();

app.get('/user', function(req, res){
  var name = '';
  setTimeout(function() {
    name = 'tobi';
  }, 500);

badsyntax

var EventEmitter = require('events').EventEmitter;

function Clock() {

  var self = this;

  this.getTime = function() {
    console.log("In getTime()");
    setInterval(function() {
        self.emit('time', self.getTime);

badsyntax

var bower = require('bower');
var path = require('path');

var cwd = path.resolve(__dirname, 'project');

bower.commands.install([], {}, {
  cwd: cwd
})
.on('log', function(result) {
  console.log(result.id, result.message);

badsyntax

{
	"directory": "assets/components"
}

badsyntax

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

inspiration

My inspiration for building this was Max Ogden's Requirebin, which allows users to use a browser based editor to run custom javascript in the browser (including javascript that had require() statements that would normally need to be pre-processed using browserify).