Removed brookjs Actions

/**
 * Value change Action type.
 *
 * @type {string}
 */
export const VALUE_CHANGE = 'VALUE_CHANGE';

/**
 * Create a new Value Change action.
 *
 * @param {string} value - Target value.
 * @returns {Action} Value Change action object.
 */
export function valueEventAction(value) {
    return {
        type: VALUE_CHANGE,
        payload: { value }
    };
}

/**
 * Field focus event action type.
 *
 * @type {string}
 */
export const FIELD_FOCUS = 'FIELD_FOCUS';

/**
 * Create a FIELD_FOCUS action object.
 *
 * @param {string} name - Field name.
 * @returns {Action} FIELD_FOCUS action.
 */
export function fieldFocusAction(name) {
    return {
        type: FIELD_FOCUS,
        payload: { name }
    };
}

/**
 * Checked change constant.
 *
 * @type {string}
 */
export const CHECKED_CHANGE = 'CHECKED_CHANGE';

/**
 * Create a new Checked Change action.
 *
 * @param {boolean} value - Target checked.
 * @returns {Action} Checked Change action object.
 */
export function checkedEventAction(value) {
    return {
        type: CHECKED_CHANGE,
        payload: { value }
    };
}

/**
 * Click event Action type.
 *
 * @type {string}
 */
export const CLICK = 'CLICK';

/**
 * Create a new Clicked Action
 *
 * @returns {Action} Clicked action object.
 */
export function clickedEventAction() {
    return { type: CLICK };
}

Observable Rendering

import Kefir from 'kefir';

export default function EditorComponent(el, props$) {
    const keyup$ = Observable.fromEvents(el, 'keyup');
    const keydown$ = Observable.fromEvents(el, 'keydown');

    return props$.sampledBy(keyup$.debounce(150))
        .flatMapLatest(props =>
            createRenderStream(props).takeUntil(keydown$)
        );

    function createRenderStream(props) {
        return Observable.stream(emitter => {
            const loop = requestAnimationFrame(() => {
                // Update the element
                emitter.end();
            });

            return () => cancelAnimationFrame(loop);
        });
    }
};

IDs & Classes: Problem

<!DOCTYPE html>
<html>
<head>
    <title>Movies and Shows</title>
</head>
<body>
<h1>Amazing Movies and TV Shows Ever!</h1>
<ol>
    <li>Finding Dory</li>
    <li>Game of Thrones</li>
    <li>Star Wars: The Force Awakens</li>
    <li>Life of Pi</li>
    <li>Dancing with the Stars</li>
    <li>The Walking Dead</li>
</ol>
</body>
</html>

Developer /etc/hosts

192.30.253.113  github.com
151.101.44.133  assets-cdn.github.com
54.236.140.90   collector.githubapp.com
192.30.253.116  api.github.com
192.30.253.122  ssh.github.com
151.101.44.133  avatars0.githubusercontent.com
151.101.44.133  avatars1.githubusercontent.com
151.101.44.133  avatars2.githubusercontent.com
151.101.44.133  avatars3.githubusercontent.com
151.101.92.162 registry.npmjs.com
52.27.70.152   npmjs.com
104.244.42.65  twitter.com
151.101.65.69  stackoverflow.com

Use Anchor Tag to Parse URL

function getURLObject(url) {
    const parser = document.createElement('a');
    parser.href = url;

    return {
        protocol: parser.protocol,
        hostname: parser.hostname,
        port: parser.port,
        pathname: parser.pathname,
        search: parser.search,
        hash: parser.hash,
        host: parser.host
    };
}

debounce by requestAnimationFrame

events$.withHandler((() => {
    let last, emitter, loop;

    return (_emitter, { value, type }) => {
        emitter = _emitter;

        switch (type) {
            case 'value':
                last = value;

                if (!loop) {
                    loop = requestAnimationFrame(() => {
                        emitter.value(last);
                        last = undefined;
                        loop = undefined;
                    });
                }
                break;
            case 'error':
                emitter.error(value);
                break;
            case 'end':
                if (loop) {
                    cancelAnimationFrame(loop);
                }

                loop = requestAnimationFrame(() => {
                    if (last) {
                        emitter.value(last);
                    }

                    emitter.end();

                    last = undefined;
                    loop = undefined;
                });
                break;
        }
    };
})())

Server-Side Rendering with React

import React from 'react';

const App = React.createClass({
    displayName: 'App',

    propTypes: {
        headline: React.PropTypes.string.isRequired
    },

    render: function render() {
        return (
            <h1 className="headline">
                {this.props.headline}
            </h1>
        );
    }
});

export default App;
<h1 class="headline">
    Hello World!
</h1>
import express from 'express';
import exphbs from 'express-handlebars';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const app = express();

app.engine('hbs', exphbs({extname: '.hbs'}));
app.set('view engine', 'hbs');

app.use(express.static('public'));

app.get('/', (req, res) => {
    const state = { headline: 'Hello World!' };

    res.render('index', {
        app: ReactDOMServer.renderToString(<App {...state} />),
        state: JSON.stringify(state)
    });
});
import ReactDOM from 'react-dom';

const state = window.__INITIAL_STATE__ || {};

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
        <App {...state} />,
        document.getElementById('app')
    );
});

Expanding a div to take up the space in a row

<div class="row">
    <div class="contained">
        <span>Some Text</span>
    </div>
    <div class="expanded">
        <span>Some more text that should take up all the remaining space.</span>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="contained">
            <span>Some Text</span>
        </div>
        <div class="expanded">
            <span>Some more text that should take up all the remaining space.</span>
        </div>
    </div>
</div>
.table {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}

.contained {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}

.expanded {
    display: table-cell;
}

Chatr Boilerplate

{"presets":["es2015","react"]}
import express from 'express';

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.set('Content-Type', 'text/html');
    res.send('<h1>Hello World!</h1>');
});

app.listen(3000);
const webpack = require('webpack');

module.exports = {
    entry: ['./client.js'],
    devtool: 'sourcemap',
    debug: true,
    output: {
        path: 'public/',
        filename: '[name].min.js',
        sourceMapFilename: '[name].js.map'
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: 'babel',
                exclude: /(node_modules)/,
            }
        ]
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]
};
const add = (a, b) => a + b;

console.log(add(1,2));
@import "node_modules/bourbon/core/bourbon";
@import "node_modules/bourbon-neat/app/assets/stylesheets/neat";

@import "base/base";
app.engine('hbs', exphbs({extname: '.hbs'}));
app.set('view engine', 'hbs');

app.get('/', (req, res) => {
    res.render('index', {
      app: '<h1>Hello World!</h1>',
      state: '{}'
    })
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Chat</title>
    <link href="/styles.css" rel="stylesheet" title="Default Styles">
  </head>
  <body>

    <div id="app">{{{app}}}</div>

    <script type="text/javascript">
      window.__INITIAL_STATE__ = {{{state}}}
    </script>
    <script src="/client.js" charset="utf-8"></script>

  </body>
</html>

Does this get garbage collected?

var el = (function() {
  var templateString = template.render();
  var wrapper = document.createElement('div');
  wrapper.innerHTML = templateString;

  var result = wrapper.firstChild;
  // Zero out the innerHTML to ensure
  // no reference to the resulting node.
  wrapper.innerHTML = '';

  return result;
})();