andrewk

### Keybase proof

I hereby claim:

  * I am andrewk on github.
  * I am andrew (https://keybase.io/andrew) on keybase.
  * I have a public key ASCxw9Pg4zFREfvoBsCnNQoawhSlSZb5J2z4DsVHbpoSEgo

To claim this, I am signing this object:

andrewk

import provideIntl from './provideIntl';
import ReactIntl from 'react-intl';

const components = {};
export default components;

// FormattedMessage, FormattedNumber, FormattedRelative, FormattedDate
Object.keys(ReactIntl).forEach(key => {
    components[key] = provideIntl(ReactIntl[key]);
});

andrewk

Good Enough™ Form Validation in React

…specifically React 0.13 using ES6 class syntax

Originally I was implementing the validator as a context, but then I got stung by parent context vs owner context. I'll likely return to the context model when React's context implementation is more final (looks like they're moving towards parent context over owner context, which I'd prefer).

Requirements

• markup must match our existing markup, for UX consistency.
• inputs are re-usable components with an explicit contract -- they are responsponsible for their error display and any required filtering of their value.

andrewk

Spies

Create a spy

// "bare" spy
var spy = jasmine.createSpy('spyName');

// Mock object of spies: spy.next(), spy.current(), etc

andrewk

module.exports = function (config) {
  'use strict';

  config.set({

      basePath: '',

      preprocessors: {
          'assets/tests/**/*.js': ['webpack'], // our specs
          'assets/js/**/*.js': ['webpack'], // our components

andrewk

#!/bin/sh

# Convert movie (screencast) to lofi animated gif for embedding in github PR's, emails etc.
#
# Requires: ffmpeg, gifsicle
# Screencasts are easily captured in Quicktime Player: File > New screen recording

if [ -z "$1" ]
  then
    echo "Usage: mov2gif input.mov 700 > output.gif"

andrewk

define(function(require) {
    'use strict';

    var defineComponent = require('flight/lib/component');
    return defineComponent(ComponentRegistry);

    function ComponentRegistry() {
        this.components = [];

        this.defaultAttrs({

andrewk

# watch assets for changes in development, using bower deps
watch:
    sass -I assets/scss -I bower_components --watch assets/scss:public/css

# watch assets for changes in development, using npm deps
watch:
    sass $(foreach d, $(shell find . -name 'node_modules' -type d), -I$d) -I assets/scss --watch assets/scss:public/css


# and what does that `find` call look like in reality?

andrewk

- I wrote this on the train after a long day with a heavy head cold. I haven't run it, 
but regardless of likely errors I think it expresses the design well enough.

- Segment and ConditionSet look close to identical, but that's likely due to the simplified
nature of the outline you provided

- I don't like attaching components to classes unless they're `js-`, as it's coupling 
your styling and behaviour layers. We excelusively use data attributes for JS-DOM coupling 
and I've quickly grown fond of the approach.

andrewk

.PHONY: setup test

setup:
	mkdir test
	mkdir test/specs
	mkdir test/fixtures
	mkdir assets
	mkdir assets/js
	mkdir assets/css
	mv test-main.js ./test/