greim

import https from 'https'
import http from 'http'
import url from 'url'
import adapt from 'ugly-adapter' // callback => promise adapter; need to npm install this
import tls from 'tls'
import net from 'net'
import fs from 'fs'
import os from 'os'
import path from 'path'
import childProcess from 'child_process'

greim

Using a Reverse Proxy for Rapid Prototyping

Note: This will be a contrived example, but hopefully illustrates some real-world trade-offs.

Example scenario: Suppose you're an independent web developer, and a client asks you to prototype a redesign of their website header. You'll be paid for your time, and if the client likes it, you'll be hired to do the full implementation. Your incentive is to show the client a quick, functional demo of the updated header. The problem is that quick and functional tend to be mutually-exclusive.

At One Extreme: Do It Fast

greim

How you can help reduce node_modules bloat

This recent reddit thread reveals discontent among the web development community about the sheer volume of stuff in a typical node_modules dir. 140MB in this case!

Is it a design flaw in npm?

Opinions in the thread varied from "I'm surprised npm even works" to "everything is fine". I'm not going to offer an opinion, just these two observations:

1. node_modules dirs typically do contain lots of stuff that doesn't need to be there.
2. The latest version mitigates overall size by flattening the dependency tree, but some of the bloat is beyond npm's control.

greim

How HTML Parsing Works

An HTML parser scans through an input string, starting at the beginning:

<div>hello<br>world</div>
│
└─ scanning begins here

greim

Vacancy Observers

Vacancy observers are a data-fetching strategy for functional UI frameworks which doesn't rely on side effects. Instead, components are written as pure functions, indicating their remote data dependencies directly in their output using vacancies.

An observer may then detect the presence of those vacancies and take appropriate action, depending on the environment. For example:

• In an Elm app: the observer might be a MutationObserver—running independently in JavaScript—which listens for vacancies in the DOM, makes HTTP requests, and feeds the results into Elm over a port.
• In a React+Redux app: similar to above, the observer might be a MutationObserver which dispatches actions to Redux.
• In a server-side renderer: The observer might be a post-processor which analyzes the HTML output to detect vacancies, fetch them, and use that data to either re-render the output, or http2-push to the client.
• In a unit test runner: the observer would simply be the caller of the co

greim

'use strict';

/*
 * Binary search tree with in-order iteration.
 * http://greim.github.io/gen/dist/00-intro.html
 */

class Tree {
  add(value) {
    if (this.root) this.root.add(value);

greim

/**
tree.js - nice ascii-art DOM trees
usage: tree(element[, options]);
example:
var s = tree(document.body,{
	serialize: function(element){...}, // return a string representation such as "div#foo.bar"
	filter: function(element){...} // return false for any nodes to not include in tree
});
console.log(s);
*/

greim

'use strict'

/*
 * QuickSort algorithm adapted from here:
 * http://www.nczonline.net/blog/2012/11/27/computer-science-in-javascript-quicksort/
 */

var co = require('co')

function swap(items, firstIndex, secondIndex){

greim

/*
 * <UserProfile/> React component which
 * uses the vacancy observer pattern.
 */

function UserProfile({
  userId, // comes from the URL
  users, // collection of fetched items
}) {
  const user = users[userId];

greim

/*
 * Using `motel` to implement a vacancy observer.
 * This happens once at app startup time.
 */

const motel = require('motel');
const vacancies = motel();

// start observing the DOM for vacancies
vacancies.connect(document.getElementById('#app'));