Ben Drucker bendrucker

Droplr will auto-copy the sharing link when you take a screenshot. You'll use this on GitHub.

That copied link will look like this: http://d.pr/i/13PDt

To paste that into a GitHub issue:

![](http://d.pr/i/13PDt+)

Styling Diffable UIs

Presentation is an important part of a UI component. Diffing makes it signifcantly easier to build well-encapsulated components, but styles still pose problems. CSS is global and hard to modularize. For simple cases, inline styles fix the problem easily:

var h = require('virtual-dom/h')

function render (state) {
	var style = {
 color: state.enabled ? 'red' : undefined

	Depots.load = function load (state, callback) {
	xhr('...', function (err, data) {
	if (err) return callback(err)
	state[arrayKey].set(data)
	callback(null, data)
	})
	}


	// app.js

	return orders.reduce(function (accumlator, order) {
	accumulator.aggregates.count++
	accumulator.aggregates.total += order.total
	accumulator.orders.push(order)

	return accumulator
	}, OrderStore())

	function OrderStore () {
	return {

	function DeliveryController (injectables...) {
	var controller = {
	drivers: drivers,
	fetch: fetch
	}

	return controller

	function fetch () {
	return $http.get('drivers')

	var dep = require('dep')

	module.exports = {
	myFn: myFn
	}

	function myFn (input) {
	var myVar = {}

	// ...

	function getUrls (callback) {
	fs.readFile('./cache.json', function (err, data) {
	if (err && err.code !== 'ENOENT') return callback(err)
	getDataFromServer(function (err, data) {
	if (err) return callback(err)
	callback(null, data)
	fs.writeFile('./cache.json', JSON.stringify(data), noop)
	})
	})
	}

	Router.hook(route.profile, function (state) {
	state.put('profile', Profile())
	})

	Router.unhook(route.profile, function (state) {
	state.delete('profile')
	})

	Router.hook(route.order, function (state, params, callback) {
	var order = Order({id: params.id})

	var Struct = require('observ-struct')
	var Email = require('email-input')
	var Password = require('password-input') // doesn't actually exist yet
	var value = require('observ-value')
	var h = require('virtual-dom/h')
	var when = require('value-when')

	function LoginForm (data) {
	data = data \|\| {}