vasanthk

cf-ui monorepo

Technical Decision

Build our UI framework inside a monorepo using Lerna.

TL;DR

Building npm packages across many individual repos make big changes difficult to make, test, and publish. Using a monorepo we can solve many of these and

vasanthk

Broken Promises

Technical Decision

Eliminate all promises from application.

TL;DR

The Promise API is the source of many confusing errors in our application, using node style callbacks eliminates the issue without reducing code quality.

vasanthk

import { connect } from 'react-redux'
import ProfilePicture from 'components/ProfilePicture'
import { changeProfilePicture } from '../actions'

export function mapStateToProps(state:any, ownProps:any):any
{
    return {
        profilePictureUrl: state.user.profilePictureUrl,
    }
}

vasanthk

var npm = require("npm");
var fs = require("fs-extra");
var chokidar = require("chokidar");

var packagePaths = [
  "../mobile-app/node_modules/shared-package/lib",
  "../web-app/node_modules/shared-package/lib",
];

var noop = () => {};

vasanthk

So you've cloned somebody's repo from github, but now you want to fork it and contribute back. Never fear!

Technically, when you fork "origin" should be your fork and "upstream" should be the project you forked; however, if you're willing to break this convention then it's easy.

* Off the top of my head *

1. Fork their repo on Github
2. In your local, add a new remote to your fork; then fetch it, and push your changes up to it

    git remote add my-fork git@github...my-fork.git

vasanthk

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

vasanthk

var tableRowNodes = document.querySelectorAll('.cast_list tr')
var tableRowArray = Array.from(tableRowNodes)
var {mainCast} = tableRowArray.reduce((acc, row) => {
  if (!acc.firstSkipped) {
    acc.firstSkipped = true
  } else if (acc.restOfCastStarted) {
    acc.rest.push(row)
  } else if (row.classList.contains('odd') || row.classList.contains('even')) {
    acc.mainCast.push(row)
  } else {

vasanthk

//  (c) 2012 Mark Wunsch http://markwunsch.com
//  MIT license.

if (!String.fromCodePoint) {
    /*!
    * ES6 Unicode Shims 0.1
    * (c) 2012 Steven Levithan <http://slevithan.com/>
    * MIT License
    */
    String.fromCodePoint = function fromCodePoint () {

vasanthk

import React from "react";
import { isEqual } from "underscore";

/**
 * HOC for diagnosing unnecessary renders and identifying faulty selectors
 *
 * Adds a logger function to a component that lists all changed props
 * Also checks if changed props are deeply equal
 *
 * Usage: Decorate the component you are investigating with renderDoctor:

vasanthk

// === Arrays

var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2


// Use from functions, only select from pattern
var foo = () => [1, 2, 3];