bradparker

(1..10e6).map { 
  SecureRandom.uuid 
}.reduce(Hash.new(0)) { |counts, uuid| 
  counts[uuid] += 1
  counts 
}.values.uniq

bradparker

Rough outline of the steps in an isolated design job

• Define project objectives
• Review identity standards
• Develop concepts and prototypes (The Design process)
• Present solution
• Evaluate solution (Maybe loops back to Develop)
• Prepare for production
• Evaluate finished piece(s) (Maybe loops back to Develop)
• Deliver finished files for production / distribution

bradparker

{
  "name": "get-going",
  "version": "2.0.1",
  "description": "",
  "main": "dist/index.html",
  "engines": {
    "node": "5.2.0"
  },
  "scripts": {
    "setup:source:dir": "mkdir -p source",

bradparker

const { keys, assign } = Object

const concern = {
  doSideEffectyThing () {
    this.property1 = 'Hip, hip!'
  }
}

const instance = {
  someProp: 'Foo',

bradparker

Sharing behaviour between React components

React 0.13 introduced using plain Javascript classes to create components, 0.14 introduced "stateless functional components" as another method of defining them. Neither of these have an in-built method for behaviour sharing such as we had with the mixins option passed to createClass. So now we get to review mixins as a pattern for behaviour sharing and, if necessary, come up with something better. If they're not all bad, we'll need to figure out how to, or even if we can, add them to the two new component definition options.

The problem

Dan Abromov's medium article from Mar 2015 makes the case for avoiding mixins.

For me (paraphrasing in the extreme), the key problems exposed are:

• mixins can unintentionally hide / distribute the source of behaviour

bradparker

Must do prop transformation, it needs to add a specific onChange handler to each control.

I dislike this immensly but it'll work with our existing components and is ugly enough to encourage us to move to something like Redux.

// import get from 'lodash/object/get'

const handleControlChange = (onChange, statePath) => (value) =>
  onChange(statePath, value)
  

bradparker

'use strict'

const crypto = require('crypto')
const fs = require('fs')
const mkdirp = require('mkdirp')
const path = require('path')
const recursive = require('recursive-readdir')

const assign = Object.assign
const keys   = Object.keys

bradparker

// I18n

const translateable = (translations) => (Component) => 
  (props = { locale: 'default' }) => {
    const localTranslations = translations[locale]
    return <Component { ...props } { ...localTranslations } />
  }
  
const Greeter = ({ greeting, name }) =>
  <p>{ greeting }, { name }</p>

bradparker

import { expect } from 'chai'

const head = (arr = []) => arr[0]
const tail = (arr = []) => arr.slice(1)
const last = (arr = []) => arr.slice(0).pop()
const init = (arr = []) => arr.slice(0, arr.length - 1)

const nextInScope = (tokens,  depth = 1, closeCount = 0) => {
  if (depth === closeCount) {
    return tokens

bradparker

import { expect } from 'chai'

const head = (arr = []) => arr.slice(0)[0]
const tail = (arr = []) => arr.slice(1)
const last = (arr = []) => arr.slice(0).pop()
const init = (arr = []) => arr.slice(0, arr.length - 1)

const subExpression = (tokens, depth = 0, currentBranch = []) => {
  if (tokens.length === 0 || head(tokens) === ')') {
    return [currentBranch, tail(tokens)]