Lukas Klinzing theluk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

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

	const md5File = require('md5-file');
	const path = require('path');

	// CSS styles will be imported on load and that complicates matters... ignore those bad boys!
	const ignoreStyles = require('ignore-styles');
	const register = ignoreStyles.default;

	// We also want to ignore all image requests
	// When running locally these will load from a standard import
	// When running on the server, we want to load via their hashed version in the build folder

	/*
	This example was built using standard create-react-app out of the box with no modifications or ejections
	to the underlying scripts.

	In this example, i'm using Google as a social provider configured within the Cognito User Pool.

	Each step also represents a file, so you can see how I've chosen to organize stuff...you can do it however
	you'd like so long as you follow the basic flow (which may or may not be the official way....but its what I found that works.
	The docs are pretty horrible)

	sudo: required #is required to use docker service in travis

	language: php #can be any language, just php for example

	services:
	- docker # required, but travis uses older version of docker :(

	install:
	- echo "install nothing!" # put your normal pre-testing installs here