Juntao Qiu abruzzi

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

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:

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

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

	//
	// DarwinNotificationCenter.swift
	//
	// Copyright © 2017 WeTransfer. All rights reserved.
	//

	import Foundation

	/// A Darwin notification payload. It does not contain any userInfo, a Darwin notification is purely event handling.
	public struct DarwinNotification {

	## GOAL:
	## re-create a figure similar to Fig. 2 in Wilson et al. (2018),
	## Nature 554: 183-188. Available from:
	## https://www.nature.com/articles/nature25479#s1
	##
	## combines a boxplot (or violin) with the raw data, by splitting each
	## category location in two (box on left, raw data on right)


	# initial set-up ----------------------------------------------------------

	# One liner
	wget --recursive --page-requisites --adjust-extension --span-hosts --convert-links --restrict-file-names=windows --domains yoursite.com --no-parent yoursite.com

	# Explained
	wget \
	--recursive \ # Download the whole site.
	--page-requisites \ # Get all assets/elements (CSS/JS/images).
	--adjust-extension \ # Save files with .html on the end.
	--span-hosts \ # Include necessary assets from offsite as well.
	--convert-links \ # Update links to still work in the static version.

	import sinonStubPromise from 'sinon-stub-promise';
	import sinon from 'sinon'
	sinonStubPromise(sinon)


	let stubedFetch = sinon.stub(window, 'fetch') )

	window.fetch.returns(Promise.resolve(mockApiResponse()));

	function mockApiResponse(body = {}) {

	## =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
	## URL Variables
	## http://p.pubnub.com/stream/<SUBKEY>/<CHANNEL>/0/-1
	## =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

	## Demo Stream
	while true; do (printf 'GET http://p.pubnub.com/stream/sub-c-5f1b7c8e-fbee-11e3-aa40-02ee2ddab7fe/pubnub-sensor-network/0/-1 HTTP/1.1\r\nHost: pubnub\r\n\r\n'; sleep 5) \| nc p.pubnub.com 80; done

	## Local tunnel
	curl "http://0.0.0.0:80/publish/demo-36/demo-36/0/ch6/0/1"

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));