vasanthk

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?

median-man

# <type>: <subject> (Max 50 char, Why is this change necessary?)
# |<----  Using a Maximum Of 50 Characters  ---->|

# |<----   Try To Limit Each Line to a Maximum Of 72 Characters   ---->|
# Explain how the commit addresses the issue

# IMPORTANT!! Describe any side effects of the change.

# Provide links or keys to any relevant tickets, articles or other resources
# Examples: "Jira issue [ABC-123]" or "Closes Github issue #123"

gunn

import * as React from 'react'
import { createPortal } from 'react-dom'

type FrameProps = React.IframeHTMLAttributes<HTMLIFrameElement> & {
  head?: React.ComponentType<any>
  children?: React.ReactNode
}
const Frame = React.memo(({head, children, ...iframeProps}: FrameProps)=> {
  const node = React.useRef<HTMLIFrameElement>()
  const [doc, setDoc] = React.useState<Document>()

solamichealolawale

.card-logo.visa{background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAABWCAMAAADSW3WyAAAB9VBMVEUAS5QAS5QAS5QAAAAASJIAS5UATJUDVpoAS5UAUJcCVZoATJUAT5cCVpsATJUATJUAS5UBUJf///8AUZjk7PQHVZoASZPw9PkFVJkAQY8RXJ7g6vMAQ5AARpIQW54ATJUATZYAT5f2qAAAUJcARJEASpQAQ4/2oQAXYKEIVZuRstFTibn2+PsDUZj7/P1Yi7v9/f7714vr8ffc5vCKrs8OWJypw9tekL0sbqnf6fLF1+dol8E9eK8wcKsASKUAPo34+vzY5O/U4e3P3uzM3OrB1OWrxdx/p8tjk78/e7EiZqUfZaQeY6MLV5vi6/SYt9SHrM6EqcxtmsNbjrxFf7MET5f3pgDz9vru8/jo7vW90eSzy+Cvx96eu9dDfLI1cqsrbKglaab09/rJ2emgvthynsZJgrUUXZ8AN4j+rAC5zuKlwNqbutaWttSPrs/+78t6o8h3ocdPhbc4dq4obKgZYqIMU5r+/v7/+vL6y2n/sQL6qgD//vq2zOH+9OCTtNNSf7P83p0AOov60Hj6vDf3rxPvpQaEqs1ahrgATZ0MUZcARZf72pX71oY6Y3lLaW5xd1b3tCr2qgz/qACBruD857xSgbVpiZv/5ZgaWIzSvosBR4g5WGpOZldmclPOqE74uz+fiTuzkCzYnxfMlhf1nAD1mgCxIGh5AAAAEnRSTlPp1OoA/OrLDOuWF8KrJeHZ54zybsP3AAAHfklEQVRo3u1aB1fTUBSOFPdOIPbpS5OYIYIIUotgSwEZIoJsZaOACO6Je++9956/0zZvJrXmHI9H6jl8lkPe6MuXe79773tBIRCYPXfRHEHIyhKyBA4zBcHppNdOO/mDPjNxcyb3rSw0n18F99CB1GlzFs2dHQgIgYXzs4O5/wyrU7uC2fPnBYTZsyb3l+d

joshsalverda

import {useCallback, useRef, useEffect} from 'react'
import {useField, useFormikContext} from 'formik'
import update from 'immutability-helper'

const useFieldArray = props => {
  const [field, meta] = useField(props)
  const fieldArray = useRef(field.value)
  const {setFieldValue} = useFormikContext()

  useEffect(() => {

perlow

import { useLayoutEffect, useRef, useState, useTransition } from 'react'
import { Router } from 'react-router-dom'
import { BrowserHistory, createBrowserHistory, Update } from 'history'

export interface BrowserRouterProps {
  basename?: string
  children?: React.ReactNode
  window?: Window
}