Jamie Mason JamieMason

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

Service Worker - offline support for the web

Progressive apps - high-res icon, splash screen, no URL bar, etc.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

	import * as rx from 'rxjs';
	import * as fs from 'fs';
	import * as path from 'path';

	function cp(from: string, to: string) {
	return stat(from)
	.flatMap((s) => {
	return s.isDirectory() ? copyDir(from, to) : copyFile(from, to)
	})
	}

	This snippets add super Simple Node.js String Colors Support.

	See here:
	http://stackoverflow.com/questions/32474241/node-js-terminal-color
	http://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color

	'use strict';

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	(function() {

	// Update 'version' if you need to refresh the cache
	var staticCacheName = 'static';
	var version = 'v1::';

	/eslint-env es6 /

	// Inspired by the paper "A tutorial on the universality and
	// expressiveness of fold" by Graham Hutton (available at
	// http://www.cs.nott.ac.uk/~gmh/fold.pdf), implementing some generic
	// list handling functions in JavaScript in terms of `fold`.

	// Personally I had an enlightnening moment when I realised the
	// beautiful interplay of cons lists and foldr during the FP101x
	// Haskell course. JavaScript's syntax doesn't make this very apparent

	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}