Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactive Programming for Couch Potatoes

Andrew Hao
February 16, 2016

Reactive Programming for Couch Potatoes

You've heard the yapping about functional reactive programming and how it's the bee's knees. But... you can't figure out how it works, and all the math-talk and theory jargon that comes up on Wikipedia is confusing to you.

Fear not! Together, we'll go through the concepts of streams, functions, and data flow. We'll take the concepts apart with diagrams and explain them in plain English.

With this newfound knowledge, we'll build ourselves a pedometer (step counter) with an HTML5 device accelerometer, RxJS (a Javascript FRP library), some gumption, and basic math.

We'll even talk a little bit about how these concepts apply to real
world frameworks like React, Redux, and Elm. In the end, you'll not only get up to speed about reactive programming, you'll be able to have new insights and tools to implement reactive principles in your next project!

Given at JS.la meetup, February 2016

Andrew Hao

February 16, 2016
Tweet

More Decks by Andrew Hao

Other Decks in Programming

Transcript

  1. Reactive Programming for Couch Potatoes (Nothing against couch potatoes) Hi,

    I'm Andrew. Friendly neighborhood programmer at Carbon Five.
  2. I've been an OO programmer for a very long time.

    The paradigms there have served me well.
  3. I've been an OO programmer for a very long time.

    The paradigms there have served me well. But the functional world was beckoning Declarative over imperative Pure functions Dataflow Not having to worry so much about state
  4. But the functional world was beckoning Declarative over imperative Pure

    functions Dataflow Not having to worry so much about state I'm a runner. I've been running for a very long time.
  5. I'm a runner. I've been running for a very long

    time. (Consistently injured for just as long.)
  6. (Consistently injured for just as long.) How do I stop

    getting hurt? Develop a quicker stride rate
  7. How do I stop getting hurt? Develop a quicker stride

    rate Run with a metronome So you can learn to internalize the correct stride cadence.
  8. Run with a metronome So you can learn to internalize

    the correct stride cadence. I've heard it said: "Reactive programming is programming with asynchronous data streams."
  9. I've heard it said: "Reactive programming is programming with asynchronous

    data streams." Let's dive into reactive and make a pedometer.
  10. (Couch potatoes unite.) Today's talk Intro to FRP RxJS Building

    a pedometer Cycle.js Throwing it on a Pebble watch
  11. Today's talk Intro to FRP RxJS Building a pedometer Cycle.js

    Throwing it on a Pebble watch I've heard it said: "Reactive programming is programming with asynchronous data streams."
  12. I've heard it said: "Reactive programming is programming with asynchronous

    data streams." OK. Back up. Let's talk about streams. Streams are like pipes.
  13. Streams are like pipes. Helpful (?) analogy Streams are asynchronous

    arrays that change over time. let prices = [1, 5, 10, 11, 22] // 5 seconds later... [1, 5, 10, 11, 22, 44] // 10 seconds later... [1, 5, 10, 11, 22, 44, 100] // And you get the ability to observe changes: prices.on('data', (thing) => console.log(thing)) // => 100
  14. Helpful (?) analogy Streams are asynchronous arrays that change over

    time. let prices = [1, 5, 10, 11, 22] // 5 seconds later... [1, 5, 10, 11, 22, 44] // 10 seconds later... [1, 5, 10, 11, 22, 44, 100] // And you get the ability to observe changes: prices.on('data', (thing) => console.log(thing)) // => 100 Hopefully more helpful analogy Streams are like arrays, only: You can't peek "into" the stream to see the past or future. You're holding onto the end of the pipe! You can only observe what comes through, at that moment in time.
  15. Hopefully more helpful analogy Streams are like arrays, only: You

    can't peek "into" the stream to see the past or future. You're holding onto the end of the pipe! You can only observe what comes through, at that moment in time. prices: --[1]
  16. prices: --[x]--[x]----[x]-------[x]------... Streams are in: Look familiar? Unix pipes: ls

    | grep 'foo' > output.log Websockets Twitter Streaming API Node streams lib Gulp Express
  17. Streams are in: Look familiar? Unix pipes: ls | grep

    'foo' > output.log Websockets Twitter Streaming API Node streams lib Gulp Express An aside on Node streams +-----+ +-----+ +-----+ +-> | A +-> | B +-> | C +-> +-----+ +-----+ +-----+ You may be familiar with Node streams. Chainable with pipe() Backpressure capabilities to handle mismatched producers/consumers
  18. An aside on Node streams +-----+ +-----+ +-----+ +-> |

    A +-> | B +-> | C +-> +-----+ +-----+ +-----+ You may be familiar with Node streams. Chainable with pipe() Backpressure capabilities to handle mismatched producers/consumers An aside on Node streams +-----+ +-----+ +-----+ +-> | A +-> | B +-> | C +-> +-----+ +-----+ +-----+ BUT: You must manage stream state: start, data, end. BUT: lack of expressive functional operators
  19. An aside on Node streams +-----+ +-----+ +-----+ +-> |

    A +-> | B +-> | C +-> +-----+ +-----+ +-----+ BUT: You must manage stream state: start, data, end. BUT: lack of expressive functional operators Let's forget you've ever heard about them (for now).
  20. Let's forget you've ever heard about them (for now). "Reactive

    programming is programming with asynchronous data streams."
  21. "Reactive programming is programming with asynchronous data streams." streams =

    Observables We will use the terms interchangeably tonight.
  22. streams = Observables We will use the terms interchangeably tonight.

    F is for Functional. let f = (x) => x + 4 +------+ 1 +--> f(x) +--> 5 +------+
  23. F is for Functional. let f = (x) => x

    + 4 +------+ 1 +--> f(x) +--> 5 +------+ F is for Functional. let f = (x) => x < 10 +------+ 1 +--> f(x) +--> false +------+
  24. F is for Functional. let f = (x) => x

    < 10 +------+ 1 +--> f(x) +--> false +------+ F is for Functional. let f = (x) => x < 10 +------+ 1 +--> f(x) +--> false +------+ You just wait. There's lots more boxes and arrows where that came from.
  25. F is for Functional. let f = (x) => x

    < 10 +------+ 1 +--> f(x) +--> false +------+ You just wait. There's lots more boxes and arrows where that came from. Streamify all the things. Now let's think of these functions in the context of streams.
  26. Streamify all the things. Now let's think of these functions

    in the context of streams. Step by step, build the pedometer.
  27. Normalize the Accelerometer data Normalize the Accelerometer data let motionData

    = eventsFromAccelerometer() let normalData = motionEvents.map(acceleration => acceleration.y); motion: ---[{x:1,y:1,z:1}]--[{x:1,y:2,z:2}]--[{x:1,y:-100,z:1}]--> normal: ---[1]--------------[2]--------------[-100]--> +-----------+ +------------+ +--> |motionData +-------> |normalData +--> +-----------+ +------------+ {x:1, 1 y:1, z:1}
  28. Normalize the Accelerometer data let motionData = eventsFromAccelerometer() let normalData

    = motionEvents.map(acceleration => acceleration.y); motion: ---[{x:1,y:1,z:1}]--[{x:1,y:2,z:2}]--[{x:1,y:-100,z:1}]--> normal: ---[1]--------------[2]--------------[-100]--> +-----------+ +------------+ +--> |motionData +-------> |normalData +--> +-----------+ +------------+ {x:1, 1 y:1, z:1}
  29. Your Rx functional toolbelt map filter zip flatMap/concatMap reduce/scan debounce

    combineWithLatest merge Your Rx functional toolbelt map filter zip flatMap/concatMap reduce/scan debounce combineWithLatest merge Special stream-oriented semantics here.
  30. Your Rx functional toolbelt map filter zip flatMap/concatMap reduce/scan debounce

    combineWithLatest merge Special stream-oriented semantics here. Peaks and troughs = steps accel(m^2/s) 20 ^ | XXXXX 15 | XXXX XXX XXX | XXX XX XXX 10 | XX X XXX | XX XXX XXX 5 |XX XXXXX +--------------------------------> time (s) 1 2 3 4 5 6 7 8 delta: -[5]-[4]-[2]-[-2]-[-5]-[2]-[3]-[4]-> change: -[+]-[+]-[+]-[-]--[-]--[+]-[+]-[+]-> stepEvents: -------------[S]-------[S]--------->
  31. Peaks and troughs = steps accel(m^2/s) 20 ^ | XXXXX

    15 | XXXX XXX XXX | XXX XX XXX 10 | XX X XXX | XX XXX XXX 5 |XX XXXXX +--------------------------------> time (s) 1 2 3 4 5 6 7 8 delta: -[5]-[4]-[2]-[-2]-[-5]-[2]-[3]-[4]-> change: -[+]-[+]-[+]-[-]--[-]--[+]-[+]-[+]-> stepEvents: -------------[S]-------[S]---------> // stream items of form: { power: 10, time: 1432485925 } function detectSteps(stream) { return stream // Group elements in sliding window of pairs .pairwise() // Calculate change and step signals .map(([e1, e2]) => { return { "timestamp": e1.time, "diff": e2.power - e1.power, } }) .map(v => Object.assign(v, { changeSignal: (v > 0) ? '+' : '-' })) // Every time a changeSignal flips, then the event // becomes a step signal. .distinctUntilChanged(v => v.changeSignal) // Smooth out erratic changes in motion. .debounce(DEBOUNCE_THRESHOLD) };
  32. // stream items of form: { power: 10, time: 1432485925

    } function detectSteps(stream) { return stream // Group elements in sliding window of pairs .pairwise() // Calculate change and step signals .map(([e1, e2]) => { return { "timestamp": e1.time, "diff": e2.power - e1.power, } }) .map(v => Object.assign(v, { changeSignal: (v > 0) ? '+' : '-' })) // Every time a changeSignal flips, then the event // becomes a step signal. .distinctUntilChanged(v => v.changeSignal) // Smooth out erratic changes in motion. .debounce(DEBOUNCE_THRESHOLD) }; Voila! A beautiful pedometer. +--------------+ +------------+ +-----------------+ {xyz} +-> |normalizeData +-> |detectSteps +-> |calculateCadence +-> 66.31 +--------------+ +------------+ +-----------------+
  33. Voila! A beautiful pedometer. +--------------+ +------------+ +-----------------+ {xyz} +-> |normalizeData

    +-> |detectSteps +-> |calculateCadence +-> 66.31 +--------------+ +------------+ +-----------------+ Voila! A beautiful pedometer. +--------------------------------------------------------+ |+--------------+ +------------+ +-----------------+| {xyz} +>-|normalizeData +-> |detectSteps +-> |calculateCadence |--> 66.31 || | | | | || |+--------------+ +------------+ +-----------------+| | Pedometer | +--------------------------------------------------------+
  34. Voila! A beautiful pedometer. +--------------------------------------------------------+ |+--------------+ +------------+ +-----------------+| {xyz} +>-|normalizeData

    +-> |detectSteps +-> |calculateCadence |--> 66.31 || | | | | || |+--------------+ +------------+ +-----------------+| | Pedometer | +--------------------------------------------------------+ Voila! A beautiful pedometer. +--------------------------------------------------------+ | | {xyz}-->| Pedometer |--> 66.31 | | +--------------------------------------------------------+
  35. Voila! A beautiful pedometer. +--------------------------------------------------------+ | | {xyz}-->| Pedometer |-->

    66.31 | | +--------------------------------------------------------+ Voila! A beautiful pedometer. +--------------------------------------------------------+ | | {xyz}-->| Pedometer |--> 66.31 | | +--------------------------------------------------------+ Essentially one long transformation.
  36. Voila! A beautiful pedometer. +--------------------------------------------------------+ | | {xyz}-->| Pedometer |-->

    66.31 | | +--------------------------------------------------------+ Essentially one long transformation. More complicated things lie on the horizon. Full-featured, rich apps need: state management composability modularity
  37. More complicated things lie on the horizon. Full-featured, rich apps

    need: state management composability modularity (Psst. We'll only need streams.)
  38. (Psst. We'll only need streams.) FRP apps follow a common

    pattern: 1. Transform inputs with map()
  39. FRP apps follow a common pattern: 1. Transform inputs with

    map() FRP apps follow a common pattern: 1. Transform inputs with map() 2. Recompute state with scan()
  40. FRP apps follow a common pattern: 1. Transform inputs with

    map() 2. Recompute state with scan() FRP apps follow a common pattern: 1. Transform inputs with map() 2. Recompute state with scan() 3. Update outputs with map() and filter()
  41. FRP apps follow a common pattern: 1. Transform inputs with

    map() 2. Recompute state with scan() 3. Update outputs with map() and filter() +------+ +------+ +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ | | | +-----+---------+ | scan +--+ +------+ | | | +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ +------+ +-----+---------+ 1) Xform 2) Recompute 3) Update
  42. +------+ +------+ +-----+---------+ in +---> | map +--> | |

    +-->+ map | filter +---> out +------+ | | | +-----+---------+ | scan +--+ +------+ | | | +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ +------+ +-----+---------+ 1) Xform 2) Recompute 3) Update +------+ +------+ +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ | | | +-----+---------+ | scan +--+ +------+ | | | +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ +------+ +-----+---------+ 1) Xform 2) Recompute 3) Update in: DOM events. Domain events. HTTP responses. out: DOM updates. Domain events. HTTP requests.
  43. +------+ +------+ +-----+---------+ in +---> | map +--> | |

    +-->+ map | filter +---> out +------+ | | | +-----+---------+ | scan +--+ +------+ | | | +-----+---------+ in +---> | map +--> | | +-->+ map | filter +---> out +------+ +------+ +-----+---------+ 1) Xform 2) Recompute 3) Update in: DOM events. Domain events. HTTP responses. out: DOM updates. Domain events. HTTP requests. 1. Transform inputs with map() Ask yourself: What are the inputs into the app?
  44. 1. Transform inputs with map() Ask yourself: What are the

    inputs into the app? Well, we have our accelerometer. let accelerometerData = Rx.Observable.fromEvent(window, 'devicemotion') .map(e => Object.assign({}, e.accelerometer)) // accelerometerData: --[ { x:, y:, z: } ]--->
  45. Well, we have our accelerometer. let accelerometerData = Rx.Observable.fromEvent(window, 'devicemotion')

    .map(e => Object.assign({}, e.accelerometer)) // accelerometerData: --[ { x:, y:, z: } ]---> Well, we have our accelerometer. let accelerometerData = Rx.Observable.fromEvent(window, 'devicemotion') .map(e => Object.assign({}, e.accelerometer)) // accelerometerData: --[ { x:, y:, z: } ]---> We should also plug that into our pedometer. let cadence = connectPedometer(accelerometerData) .map(cadence => ({ name: CADENCE_EMITTED, value: cadence })) // cadence: --[ { name: CADENCE_EMITTED, value: 66.1234 } ]-->
  46. Well, we have our accelerometer. let accelerometerData = Rx.Observable.fromEvent(window, 'devicemotion')

    .map(e => Object.assign({}, e.accelerometer)) // accelerometerData: --[ { x:, y:, z: } ]---> We should also plug that into our pedometer. let cadence = connectPedometer(accelerometerData) .map(cadence => ({ name: CADENCE_EMITTED, value: cadence })) // cadence: --[ { name: CADENCE_EMITTED, value: 66.1234 } ]--> Transform inputs, cont'd There's also DOM event data to account for: let startButton = Rx.Observable.fromEvent($('button#start'), 'click') .map((e) => { { name: 'START' } } } // startButton: --[ { name: 'START' } ]-->
  47. Transform inputs, cont'd There's also DOM event data to account

    for: let startButton = Rx.Observable.fromEvent($('button#start'), 'click') .map((e) => { { name: 'START' } } } // startButton: --[ { name: 'START' } ]--> Merge these together into an input stream: let actions = Rx.Observable.merge( startButton, cadence ) // actions: --[ { name: START } ]-- // [ { name: CADENCE_EMITTED, value: 66.1234 } ] -->
  48. Merge these together into an input stream: let actions =

    Rx.Observable.merge( startButton, cadence ) // actions: --[ { name: START } ]-- // [ { name: CADENCE_EMITTED, value: 66.1234 } ] --> 2. Recompute application state with scan(). Ask yourself: What is the minimum amount of state that my app needs to store? Anything that the UI is dependent upon Anything that stores a value that is necessary for future events to compute from.
  49. 2. Recompute application state with scan(). Ask yourself: What is

    the minimum amount of state that my app needs to store? Anything that the UI is dependent upon Anything that stores a value that is necessary for future events to compute from. Application state for this app: const initialState = { cadence: 0, runState: STOPPED, }
  50. Application state for this app: const initialState = { cadence:

    0, runState: STOPPED, } Application state for this app: const initialState = { cadence: 0, runState: STOPPED, } Note how it is a simple data structure.
  51. Application state for this app: const initialState = { cadence:

    0, runState: STOPPED, } Note how it is a simple data structure. Next we update the application state based on the current (incoming) event. let currentState = actions.scan( (oldState, action) => { switch(action.name) { case START: return Object.assign({}, oldState { runState: STARTED }) case CADENCE_EMITTED: return Object.assign({}, oldState, { cadence: action.value }) default: return oldState } }, initialState) .startWith(initialState); // actions: -----------------[START]--------[CADENCE_EMITTED, 66.12]-> // current: -[{STOPPED, 0}]--[{STARTED,0}]--[{STARTED, 66.12}]-->
  52. Next we update the application state based on the current

    (incoming) event. let currentState = actions.scan( (oldState, action) => { switch(action.name) { case START: return Object.assign({}, oldState { runState: STARTED }) case CADENCE_EMITTED: return Object.assign({}, oldState, { cadence: action.value }) default: return oldState } }, initialState) .startWith(initialState); // actions: -----------------[START]--------[CADENCE_EMITTED, 66.12]-> // current: -[{STOPPED, 0}]--[{STARTED,0}]--[{STARTED, 66.12}]--> 3. Update outputs (UI) upon state change. Conditionally update the UI based on the state of the app's runState. currentState .filter(newState => newState.runState === STARTED) .subscribe(newState => { $('.output').text( `${newState.cadence} steps per minute (SPM)` ); });
  53. 3. Update outputs (UI) upon state change. Conditionally update the

    UI based on the state of the app's runState. currentState .filter(newState => newState.runState === STARTED) .subscribe(newState => { $('.output').text( `${newState.cadence} steps per minute (SPM)` ); }); Extra RxJS bit: call subscribe to attach an observer and "activate" the stream. currentState.subscribe(newState => { // Perform side effects like: // Render the DOM // Make an HTTP request // Push an event onto a Websocket });
  54. Extra RxJS bit: call subscribe to attach an observer and

    "activate" the stream. currentState.subscribe(newState => { // Perform side effects like: // Render the DOM // Make an HTTP request // Push an event onto a Websocket }); Extra RxJS bit: call subscribe to attach an observer and "activate" the stream. currentState.subscribe(newState => { // Perform side effects like: // Render the DOM // Make an HTTP request // Push an event onto a Websocket }); (Cold) streams produce values only after an Observer attaches.
  55. Extra RxJS bit: call subscribe to attach an observer and

    "activate" the stream. currentState.subscribe(newState => { // Perform side effects like: // Render the DOM // Make an HTTP request // Push an event onto a Websocket }); (Cold) streams produce values only after an Observer attaches. Phew! Let's see it in action. http://tinyurl.com/rxcadence (Open this on your phone!)
  56. Zoom out: Organizing your FRP app with Cycle.js High level

    insight from Cycle: apps are really feedback loops:
  57. High level insight from Cycle: apps are really feedback loops:

    Dialogue Abstraction The computer is a function, Taking inputs from the keyboard, mouse, touchscreen, and outputs through the screen, vibration, speakers. The human is a function, Taking inputs from their eyes, hands, ears, and outputs through their fingers.
  58. Dialogue Abstraction The computer is a function, Taking inputs from

    the keyboard, mouse, touchscreen, and outputs through the screen, vibration, speakers. The human is a function, Taking inputs from their eyes, hands, ears, and outputs through their fingers. Inputs and outputs you say?
  59. Inputs and outputs you say? +------------------------+ | | +-----+ Computer

    | <--+ | | | | | +------------------------+ | | | | | | | | +------------------------+ | | | | | +---> | Human +----+ | | +------------------------+
  60. +------------------------+ | | +-----+ Computer | <--+ | | |

    | | +------------------------+ | | | | | | | | +------------------------+ | | | | | +---> | Human +----+ | | +------------------------+ +------------------------+ DOM | | accelerometer evts +------+ Computer | <--+ | | | | | +------------------------+ | | | | | | | | +------------------------+ | | | | | +----> | Human +----+ see screen | | moves +------------------------+
  61. +------------------------+ DOM | | accelerometer evts +------+ Computer | <--+

    | | | | | +------------------------+ | | | | | | | | +------------------------+ | | | | | +----> | Human +----+ see screen | | moves +------------------------+ +------------------------+ | | +------+ main() | <--+ | | | | DeviceMotion | +-------------+----------+ | Events | ^ | Virtual| DOM | +----+-----+ DOM| Events | | Motion | | | | Driver | | +--------+------+ | | | | DOM | +----------+ +---------> | Driver | | | +-----+--+------+ | ^ | | v | +----+--+----+ | DOM | +------------+
  62. +------------------------+ | | +------+ main() | <--+ | | |

    | DeviceMotion | +-------------+----------+ | Events | ^ | Virtual| DOM | +----+-----+ DOM| Events | | Motion | | | | Driver | | +--------+------+ | | | | DOM | +----------+ +---------> | Driver | | | +-----+--+------+ | ^ | | v | +----+--+----+ | DOM | +------------+ import Rx from 'rx'; import Cycle from '@cycle/core'; import {div, input, p, makeDOMDriver} from '@cycle/dom'; function main(sources) { const sinks = { DOM: sources.DOM.select('input').events('change') .map(ev => ev.target.checked) .startWith(false) .map(toggled => div([ input({type: 'checkbox'}), 'Toggle me', p(toggled ? 'ON' : 'off') ]) ) }; return sinks; } Cycle.run(main, { DOM: makeDOMDriver('#app') });
  63. import Rx from 'rx'; import Cycle from '@cycle/core'; import {div,

    input, p, makeDOMDriver} from '@cycle/dom'; function main(sources) { const sinks = { DOM: sources.DOM.select('input').events('change') .map(ev => ev.target.checked) .startWith(false) .map(toggled => div([ input({type: 'checkbox'}), 'Toggle me', p(toggled ? 'ON' : 'off') ]) ) }; return sinks; } Cycle.run(main, { DOM: makeDOMDriver('#app') }); See how it's done: Cycle.js Introduction RxCadence test harness app
  64. See how it's done: Cycle.js Introduction RxCadence test harness app

    FRP reducer pattern Cycle.js: Reducer pattern Redux: Actions/Reducers/React Elm: Model/Update/View
  65. FRP reducer pattern Cycle.js: Reducer pattern Redux: Actions/Reducers/React Elm: Model/Update/View

    Oh, about the Pebble You can load arbitrary Javascript libraries (like RxJS) on a Pebble! Cloud Pebble: http://www.cloudpebble.com PebbleJS: https://pebble.github.io/pebblejs/
  66. Oh, about the Pebble You can load arbitrary Javascript libraries

    (like RxJS) on a Pebble! Cloud Pebble: http://www.cloudpebble.com PebbleJS: https://pebble.github.io/pebblejs/
  67. Sweetcadence Recap Learn to see everything as a stream. Slowly

    build your tool familiarity with RxJS. They are powerful, but they have a learning curve.
  68. Recap Learn to see everything as a stream. Slowly build

    your tool familiarity with RxJS. They are powerful, but they have a learning curve. Recap (cont'd) Reducer pattern: Map inputs Recompute state Update output Abstract your app as a dialogue between the user and the system.
  69. Recap (cont'd) Reducer pattern: Map inputs Recompute state Update output

    Abstract your app as a dialogue between the user and the system. Further reading (and many thanks!) "The Introduction to Reactive Programming You've Been Missing" "OMG Streams!" RxMarbles: http://rxmarbles.com/ ReactiveX: http://reactivex.io/learnrx/ Cycle.js docs: http://cycle.js.org
  70. Further reading (and many thanks!) "The Introduction to Reactive Programming

    You've Been Missing" "OMG Streams!" RxMarbles: http://rxmarbles.com/ ReactiveX: http://reactivex.io/learnrx/ Cycle.js docs: http://cycle.js.org Thanks! Github: andrewhao Twitter: @andrewhao Email: [email protected]
  71. Thanks! Github: andrewhao Twitter: @andrewhao Email: [email protected] Image attributions: https://www.flickr.com/photos/alphageek/210677885/

    https://www.flickr.com/photos/95744554@N00/156855367/ https://www.flickr.com/photos/autowitch/4271929/ https://www.flickr.com/photos/internetarchivebookimages/