shubhamV123

<List className="list-a">
  <Item className="item-a">One</Item>
  <Item className="item-b">Two</Item>
</List>

<List className="list-b">
  <Item className="item-a">One</Item>
  <Item className="item-b">Two</Item>
</List>

shubhamV123

import React from 'react';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

/**
 * A replacement component for the react-router `Prompt`.
 * Allows for more flexible dialogs.
 *
 * @example
 * <NavigationPrompt when={this.props.isDirty}>

shubhamV123

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType('paint');
    performanceEntries.forEach( (performanceEntry, i, entries) => {
      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    });
  } else {
    console.log('Performance timing isn\'t supported.');
  }

shubhamV123

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

shubhamV123

### Keybase proof

I hereby claim:

  * I am shubhamv123 on github.
  * I am shubham213 (https://keybase.io/shubham213) on keybase.
  * I have a public key ASAgrBMkLRciZsLQlXAqYvkYozxn03it1BMugBcTpLg9_Ao

To claim this, I am signing this object:

shubhamV123

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?

shubhamV123

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

shubhamV123

jest  e2e-tests/RA_GLOBAL/global.test.js -c config/jest-e2e.config.js

shubhamV123

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace:true}) || compose;
const store = createStore(
  connectRouter(history)(reducer),// new root reducer with router state
  composeEnhancers(
    applyMiddleware(
      thunk,
      routerMiddleware(history), // for dispatching history actions,
    )
  ),

shubhamV123

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');