ash alanshaw

crowd coupon mine

Mine the coupons for a promotion by interacting with adverts. Coupons are mined on exponential basis so need more and more people to interact before unlock.

whack-a-mole

Use the touch capability to whack-a-mole with a company logo or something. High scores shared between all adverts.

advert pokemon

Collect the adverts, fight the adverts, top trumps style

bus buddy

Last week we officially launched the KitMapper.com website - a peer to peer AV kit rental service. You own some kit you don't use all the time and would like to make some money from it, or you need some kit for a project you're working on. It's a great idea and we're really proud to be part of it.

What you may not hear much about is the tech behind the site. We're super happy with the way it turned out and the experience you get when you visit it, so we'd love to share with you some of the awesome bits before it gets lost in the sands of time!

From a high level, KitMapper is just a Node.js based site using Hapi on the server and page.js on the client, bundled up with Browserify. The big idea we had with this site that we've not previously explored was "dual side rendering"...but, what does that even mean?

Well, the app is a big place to search for items of kit. It ha

function findAllUsers (callback) {
  User.find({}).exec().then(function (users) {
    var userArr = []
    async.each(users,
      function (user, callback2) {
        userArr.push(user)
        callback2(null)
      },
 function (err) {

Global

All of header appears clickable, but only some bits are
No hover effect on header menu items - intentional?
"About us", "How it works", "Register seller/buyer" header images are all the same
On iphone 5 (320px width) login link wraps
Footer email and phone not linked
Scroll to top on page change not working
The toastr messages look a bit out of place IMHO
Logout menu item looks disabled

The problem:

// This is used as express middleware
// Express middleware should look like: `function (req, res, next)`

const wrap = require('watt').wrap

// Firstly, super confusing because `next` in the code below is actually watt's `next`, not express `next`
// Express calls this with (req, res, expressNext) - I've renamed next to `expressNext` to diffentiate

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	width: 960px;
	height: 500px;
	}

	// This is how watt (https://www.npmjs.com/package/watt) works:

	// The watt factory function takes a generator as it's parameter
	const watt = (generator) => {
	// ...and returns a function you can call to RUN it
	return () => {
	// Create a new instance of the generator
	const g = generator(next)

	// Create a callback your code will give to all your node style async functions

	const Http = require('http')

	function createMockJsonServer ({ statusCode = 200, body, headers = {} }) {
	return Http.createServer((req, res) => {
	res.statusCode = statusCode
	res.setHeader('Content-Type', 'application/json')
	Object.keys(headers).forEach((k) => res.setHeader(k, headers[k]))
	if (body) res.write(JSON.stringify(body))
	res.end()
	})

	import React, { Component, PropTypes } from 'react'

	class CoinbaseWidget extends Component {
	constructor (props) {
	super(props)
	this.onMessage = this.onMessage.bind(this)
	}

	componentDidMount () {
	window.addEventListener('message', this.onMessage, false)

	// Usage:
	// PRIVATE_KEY= PUBLIC_KEY= OUTPUT_DIR='./images' node uc-download-bucket.js

	const Uc = require('uploadcare')(process.env.PUBLIC_KEY, process.env.PRIVATE_KEY)
	const Async = require('async')
	const Fs = require('fs')
	const Path = require('path')
	const Request = require('request')

	const outputDir = Path.resolve(process.env.OUTPUT_DIR \|\| process.cwd())