Skip to content

Instantly share code, notes, and snippets.

View vasanthk's full-sized avatar

Vasa vasanthk

View GitHub Profile
@vasanthk
vasanthk / System Design.md
Last active July 10, 2025 04:31
System Design Cheatsheet

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@vasanthk
vasanthk / slim-redux.js
Created May 10, 2016 18:21 — forked from gaearon/slim-redux.js
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@vasanthk
vasanthk / Enhance.js
Created May 17, 2016 06:56 — forked from sebmarkbage/Enhance.js
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
[...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
vasanthk / index.js
Created May 20, 2016 00:00 — forked from gaearon/index.js
Breaking out of Redux paradigm to isolate apps
import React, { Component } from 'react'
import Subapp from './subapp/Root'
class BigApp extends Component {
render() {
return (
<div>
<Subapp />
<Subapp />
<Subapp />
@vasanthk
vasanthk / redux-ecosystem-without-redux.js
Created May 26, 2016 03:50 — forked from slorber/redux-ecosystem-without-redux.js
Use Redux ecosystem without Redux
////////////////////////////////////////////////////////////////////////
// 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
vasanthk / redux-light-example.js
Created June 9, 2016 00:03 — forked from bloodyowl/redux-light-example.js
redux in 14 lines of code
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
}
})

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

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.

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,
}
}