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 [email protected]

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

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

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

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

const store = createStore((state = { counter: 0 }, action) => {
  switch(action.type) {
    case "INCREMENT":
      return { counter: state.counter + 1 }
    case "DECREMENT":
      return { counter: state.counter - 1 }
    default:
      return state
  }
})

vasanthk

////////////////////////////////////////////////////////////////////////
// Intro
///////////////////////

// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux
// For Reselet there's nothing to do, it's just not coupled to Redux
// For the others, you just need to provide an adapter

// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API
// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster

vasanthk

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

vasanthk

[...document.querySelectorAll('.invite-card')].forEach(card => {
  const headline = card.querySelector('.headline').textContent;
  const accept = card.querySelector('.bt-invite-accept');
  const decline = card.querySelector('.bt-invite-decline');
  const name = card.querySelector('.name').textContent;

  if(headline.match(/recruit/gi)) {
    console.log(`Nah. ${name} looks a little fishy to me. 🚷🚷🚷`);
    decline.click();
  } else {

vasanthk

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {