chrisrzhou

//https://codesandbox.io/s/x77p8rrnxo

import React from 'react';
import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols';

export default class Scene extends React.Component {
  static defaultProps = {
    radius: 600,
    textureURL:

chrisrzhou

D3 Sunburst Sequence

bl.ocks.org link

D3 Sunburst Sequence visualizes a graph of nodes by highlighting sequential progression of nodes leading up to a final value. A sunburst sequence is useful to visualize relative weights/percentages of a starting state to an end state (e.g. webpage redirects, product retention, subscription-based products, cashflows).

---

Description

chrisrzhou

create-react-app testapp
cd testapp

// dev flow
yarn start

// build flow
yarn build
cd build

chrisrzhou

Cryptography Notes

Stanford Class: Crypto I

What is Cryptography

• Central Theorem: Anything that can be done with a trusted authority can also be done without.
  • Instead of passing inputs x1, x2, ..., xn to some Authority object, which then outputs the result f(x1, x2, ..., xn), the inputs themselves can talk to each other and output the same result f(x1, x2, ..., xn)
• Crypto Magic
  • Privately outsourcing computation: e.g. Google can compute encrypted results E[result] of an encrypted query E[query] without every knowing the contents of query itself.
  • Zero knowledge (proof of knowledge): It is provable that you can give the solution of any puzzle to another person without giving the details of the solution itself. WTF???
• Cryptography is a rigorous science with 3 key steps:

chrisrzhou

Core Libraries in React Applications

• react
• react-redux
• react-router
• recompose
• redux
• react devtools (chrome)
• redux devtools (chrome)

chrisrzhou

// basics
type TSimpleType = {
  // prefer to name flow types with 'T*' syntax
  stringProp: string,
  nullableStringProp: ?string,
  optionalStringProp?: string,
  optionalAndNullableStringProp?: ?string,
  type: 'a' | 'b' | 'c',
};

chrisrzhou

Closure

// no closure
for (var i=1; i<=5; i++) {
  setTimeout(() => {
    console.log(i);  // 6, 6, 6, 6, 6
  }, i*1000);
}

chrisrzhou

onlyOne

Write a function that returns true or false if exactly one of its parameter is true.

const a = true;
const b = false;
const c = false;
...
onlyOne(a, b, b);  // true
onlyOne(a, b, b, b); // true

chrisrzhou

Git Advanced Resources

Interactive Rebase

• Enter interactive rebase using git rebase -i
• Some rebase options include:
  • squash: combine commits
  • edit: split commits (using git reset HEAD^)
  • reword: rename commit
  • pick: run commits in order

chrisrzhou

Bootstrap Best Practices

General

• Only style what you need. Create classes or IDs to allow targeting of specific elements.

Containers

• Use container to create padding and margins that center based on screen width.
• Use container-fluid to allow for expansion to the whole screen width while keeping a natural padding.