bendrucker

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

bendrucker

// before
var element = createElement(document.body)
element.render(data)

// after
var element = createElement()
element.render(data)
document.body.appendChild(element.element)

bendrucker

'use strict'

var Firebase = require('firebase')
var createElement = require('base-element')

var ref = new Firebase('https://angularu-workshop.firebaseio.com')
var usersRef = ref.child('users')
var users = {}

usersRef.on('child_added', set)

bendrucker

Array.prototype.map = function (callback, thisValue) {
  return this.reduce(function (acc, item, index, array) {
    return acc.concat(callback.call(thisValue, item, index, array)))
  }, [])
}

bendrucker

// equivalent

// apply

function MyEl () {
  BaseElement.apply(this, arguments)
}

// call

bendrucker

Reproducing

1. Create a reference
2. Add a value listener
3. Wait two seconds to ensure the data loads
4. Add a value listener on a child

Result

In our script, childListener is run synchronously. That means it runs before we increment the count and the assertion fails. This releases the dark͝ tend̴r̡i҉ls of Zalgo.

bendrucker

class Child extends Parent {
  parse (attributes) {
    super.parse(attributes)
    return attributes
  }
}

bendrucker

var card = require('creditcards').card;

console.log('Validates as', card.type('6759000000000000'));
console.log('Eagerly detected as', card.type('67', true));

bendrucker

module.exports = require('confidential-divshot')({
  firebase: {
    endpoint: {
      property: 'FIREBASE_ENDPOINT',
      required: true
    }
  }
});

bendrucker

'use strict';