Jamie Mason JamieMason

Mono Repository Tool Comparison

For Web Client / Front End Projects

(That Probably Use HTML, CSS, and JS)

I made a list of 20 things I might want out of a monorepo tool for a Design System to use as a basis for comparing some of the options including Lerna, Northbrook, and Rush.

⚠️ Northbrook's author says the project is pretty dead and now uses Lerna.

Qualifications Wanted

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

	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";
	}