mundi morgado mundizzle

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] {

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

inspiration

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	(function(window){

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

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

	/*
	Bootstrap v3.3.1 (http://getbootstrap.com)
	*/

	/*
	NOTE:

	This file has Normalize.css removed.

	It still requires a "reset.css", so we're using this...

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	Solarized
	#FDF6E3,#EEE8D5,#93A1A1,#FDF6E3,#EEE8D5,#657B83,#2AA198,#DC322F

	Solarized Dark
	#073642,#002B36,#B58900,#FDF6E3,#CB4B16,#FDF6E3,#2AA198,#DC322F

	"use strict";

	/**
	Barebones custom events implementation. Extend or mix in this class to add event
	support to your own classes.

	Example:

	function MyClass() {
	// Example of attaching a listener (this isn't required).