foleyatwork

<>
  {insert.order === 'before' && insert.component}
  {paragraphComponent}
  {insert.order === 'after' && insert.component}
</>

foleyatwork

const inserts = {
  // The name of the paragraph that corresponds with an insert.
  [paragraph.name]: {

    // Whether the insert should appear before or after a graf.
    order: 'before' | 'after,

    // The component to inject.
    component: () => Hello, World!, // a React Node.
  },

foleyatwork

var events = [];

for (var property in HTMLElement.prototype) {
  var match = property.match(/^on(.*)/);

  if (match) { 
    events.push(match[1]);
  }
}

foleyatwork

alert("Hello!")

onbeforeunload = function() {
  alert("Wait, don't go!!!")
}

foleyatwork

Question #1: http://codepen.io/foleyatwork/pen/JKPmyq?editors=0010

Question #2: http://codepen.io/foleyatwork/pen/YWKJNP?editors=0010

Question #3: http://codepen.io/foleyatwork/pen/PzYyKb?editors=0010

Question #4:

foleyatwork

// You can make stateless React components from pure functions
// but you lose out on the ability to do .bind(this, this.props)
// in event callbacks. Below is an empty component that shows
// a possible workaround for that limitation.

// This would be useful for components that have no state but
// update a store.

import React from 'react';

foleyatwork

/* globals Ok, _, ReactDOM, ENV, Mousetrap */

const OkModalManager = require("~/okmodal/util/OkModalManager");
const App = require("~/okmodal/components/App");
const C = require("~/okmodal/util/Constants");

/**
 * Log an error string to the console with a styling OkModal prefix.
 * @method logSimpleError
 * @param {String} message

foleyatwork

// YUI
if (Y.one('.some-el')) {
  // returns undefined if .some-el is not on the page.
}

// jQuery (incorrect)
if ($('.some-el')) {
  // returns an array if .some-el is not on the page.
}

foleyatwork

/*
 * This way of creating a controller has a few issue:
 * 1. It buries the namespace declaration at the bottom of the document.
 * 2. It creates an unnecessary abstraction of the namespace that may not be obvious to developers.
 * 3. It requires retyping the namespace in every single file.
 */
(function(exports) {
  var HelloWorld = function() {
    console.log('Hello, World!');
  }

foleyatwork

/**
 * This controller pattern relies on a createController method that
 * I typically create in my site.js. To see a boilerplate site.js file
 * that works with this style, see the link below.
 * 
 * @see https://gist.github.com/foleyatwork/f2a67d4a28f43a55d1cd
 */
Site.createController('RefreshImagesOnResize', function() {

  // When using jQuery inside of a controller, just assume the