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:
<> | |
{insert.order === 'before' && insert.component} | |
{paragraphComponent} | |
{insert.order === 'after' && insert.component} | |
</> |
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. | |
}, |
var events = []; | |
for (var property in HTMLElement.prototype) { | |
var match = property.match(/^on(.*)/); | |
if (match) { | |
events.push(match[1]); | |
} | |
} |
alert("Hello!") | |
onbeforeunload = function() { | |
alert("Wait, don't go!!!") | |
} |
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:
// 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'; |
/* 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 |
// 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. | |
} |
/* | |
* 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!'); | |
} |
/** | |
* 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 |