PatrickJS

const MODULE_DIR = /(.*([\/\\]node_modules|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].*)?$/g;

{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	include(filepath) {
		if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
		let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
		try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
		return !!(pkg.modules || pkg['jsnext:main']);

PatrickJS

import { Injectable, Optional, Inject } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { NodePlatformLocation, REQUEST_URL, ORIGIN_URL } from 'angular2-platform-node';
import { Response, Request } from 'express';


/**
 * Issue HTTP 302 redirects on internal redirects
 */
@Injectable()

PatrickJS

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

PatrickJS

type FrameScope = {
  [key:string]: mixed
};
type StackFrame = {
  name?: string,
  fileName?: string,
  lineNumber?: number,
  columnNumber?: number,
  scope?: FrameScope
};

PatrickJS

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

Usage

// The factory accepts 2 functions
stateMachineComponent(reduce, render)

PatrickJS

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

PatrickJS

How to setup AWS lambda function to talk to the internet and VPC

I'm going to walk you through the steps for setting up a AWS Lambda to talk to the internet and a VPC. Let's dive in.

So it might be really unintuitive at first but lambda functions have three states.

1. No VPC, where it can talk openly to the web, but can't talk to any of your AWS services.
2. VPC, the default setting where the lambda function can talk to your AWS services but can't talk to the web.
3. VPC with NAT, The best of both worlds, AWS services and web.

PatrickJS

// used to retrieve template content
const templates = new Map;

// used to retrieve node updates
const updates = new WeakMap;

// hyperHTML, the nitty gritty
function hyperHTML(chunks, ...interpolations) {

  // if the static chunks are unknown

PatrickJS

exports.handler = function(event, context) {

  var sampleInput = {
    totalPhotos: 496,
    imagesPerLambda: 100,
    bucketName: 'sample-bucket',
    imageSizes: [{
      width: 600,
      height: 400,
      description: 'A medium thumbnail',

PatrickJS

exports.handler = function(event, context) {
  // We'd get this from the Lambda event in reality
  var sampleInput = {
    from: 1,
    to: 39,
    bucketName: 'test-bucket',
    imageSizes: [{
      width: 600,
      height: 400,
      description: 'A medium thumbnail',