Point-Free Style – Functional Light JS v2 from Front-End Masters

function output(txt) {
	console.log(txt);
}

function printIf(predicate) {
	return function(msg) {
		if (predicate(msg)) {
			output(msg);
		}
	};
}

function isShortEnough(str) {
	return str.length <= 5;
}

function isLongEnough(str) {
	return !isShortEnough(str);
}

var msg1 = "Hello";
var msg2 = msg1 + " World";

printIf(isShortEnough)(msg1);		// Hello
printIf(isShortEnough)(msg2);
printIf(isLongEnough)(msg1);
printIf(isLongEnough)(msg2);		// Hello World
const output = console.log.bind(console);
const when = func => pred => val => {
  if (predicate(val)) {
    func(val);
  }
};
const not = func => val => !func(val);
const printIf = when(output);
const isShortEnough = str => str.length <= 5;
const isLongEnough = not(isShortEnough);

Simple Path

const getPath = (path, target) =>
    path.split('.')
        .reduce((value, key) => value[key], target);

// Usage
const path = 'a.b.c';
const target = {
    a: {
        b: {
            c: true
        }
    }
};

assert(true === getPath(path, target));

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$ = Kefir.fromEvents(el, 'keyup');
    const keydown$ = Kefir.fromEvents(el, 'keydown');

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

    function createRenderStream(props) {
        return Kefir.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;
        }
    };
})())