mundi morgado mundizzle

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

JavaScript function hoisting by example

Below are many examples of function hoisting behavior in JavaScript. Ones marked as works successfuly print 'hi!' without errors.

To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js

Notes on hoisting

(I may be using incorrect terms below, please forgive me)

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

A Guide to Functional Programming Lingo for JavaScripters

Functional programming gets a bad wrap about being too hard for mere mortals to comprehend. This is nonsense. The concepts are actually quite simple to grasp.

The jargon is the hardest part. A lot of that vocabulary comes from a specialized field of mathematical study called category theory (with a liberal sprinkling of type theory and abstract algebra). This sounds a lot scarier than it is. You can do this!

All examples using ES6 syntax. wrap (foo) => bar means:

function wrap (foo) {

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.

	<div id="styleguide-icon-grid"></div>
	<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>

	<script>
	var grid = document.querySelector('#styleguide-icon-grid');
	var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';

	function svgloaded() {
	var svgEmbed = document.querySelector("#svgembed");
	var svg = svgEmbed.getSVGDocument();

	var cheerio = require('gulp-cheerio');
	var svgmin = require('gulp-svgmin');
	var svgstore = require('gulp-svgstore');

	gulp.task('svgstore', function () {
	return gulp
	.src('assets/icons/*.svg')
	.pipe(svgmin())
	.pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' }))
	.pipe(cheerio({

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

	(function(window){

	var EVENT_EXISTS = 'GlobalEvents: Event already exists.';

	var eventIsRunning,
	_eventStack,
	_findByName,
	stackEvent,
	removeEvent,
	eventListener,