hhff

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

hhff

Spree API Server Needs
- Easy Setup & Deployment (Dokku)
- New Relic
- Error Monitoring (Raven)
- Performance Monitoring (Skylight)
- Logging (Loggly or Logentries?)
- SSL (Dokku handles this)
- Database Backups (http://donpottinger.net/blog/2014/11/22/bye-bye-heroku-hello-dokku-part-2.html (See Clockwork section))
- Caching (Memcached + Dalli)
- Worker (Sidekiq)

hhff

import Ember from 'ember';
import DS from 'ember-data';

const underscore = Ember.String.underscore;

export default DS.JSONAPISerializer.extend({
  keyForAttribute(attr) {
    return underscore(attr);
  },

hhff

...snip...

++ dirname /var/lib/dokku/plugins/domains/commands
+ source /var/lib/dokku/plugins/domains/../common/functions
++ set -eo pipefail
++ [[ -n 1 ]]
++ set -x
+ RE_IPV4='([0-9]{1,3}[\.]){3}[0-9]{1,3}'
+ RE_IPV6='([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|'

hhff

remote: ++ /usr/bin/tty
remote: ++ true
remote: + [[ not a tty == \n\o\t\ \a\ \t\t\y ]]
remote: + return 1
remote: + DOKKU_QUIET_OUTPUT=1
remote: ++ id -un
remote: + [[ dokku != \d\o\k\k\u ]]
remote: + [[ -n '' ]]
remote: + case "$1" in
remote: + APP=test-static-buildpack

hhff

import Ember from 'ember';

const {
  get,
  Route
} = Ember;

export default Route.extend({
  beforeModel() {
    return get(this, 'torii').open('facebook-connect', { recieveManualAuthorization: true })

hhff

<!-- Change This: -->
<div id="eames-interactive-story" style="margin-left:-55px" data-asset-path="/content/dam/hermanmiller/microsites/eames-interactive-story/" data-locale-code="en"></div>


<!-- To This: -->
<style>
  #eames-interactive-story h2 {
    font-size: 20px;
  }
</style>

hhff

<nav class='top-bar'>
  <button class='login'>Login</button>
</nav>

<div class='content-container'>
  <div class='left-content'>
    <h6>Single Shoe Club</h6>
  </div>
  <div class='right-content'>
    <h1>Sign up and get a free Shoe</h1>

hhff

<nav class='position-fixed full-width nav-height'>
  <button class='background-color-mid-green color-white padding'>Login</button>
</nav>

<div class='row nav-padding'>
  <div class='small-12 medium-6 large-4 columns'>
    <h6 class='color-green vertical-center padding-top-2x'>Single Shoe Club</h6>
  </div>
  <div class='small-12 medium-6 large-8 columns'>
    <h1 class='color-white font-weight-600 uppercase'>Sign up and get a free shoe</h1>

hhff

$colors: (
  'light-grey': #f9f9f9,
  'mid-grey': #9b9b9b,
  'dark-grey': #4d4d4d,
  'white': #fff,
  'bright-blue': #6ad3ef,
  'light-blue': #4c92c3,
  'mid-blue': #0b73ac,
  'dark-blue':  #004a69,
  'mid-green': #1bba99,