Tiago Celestino tcelestino

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

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

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {

Git Cheat Sheet

Commands

Getting Started

git init

or

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

	'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::';

	#!/usr/bin/env bash

	# A basic Self Signed SSL Certificate utility
	# by Andrea Giammarchi @WebReflection

	# https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network

	# # to make it executable and use it
	# $ chmod +x certificate
	# $ ./certificate # to read the how-to

	var active = false;

	function changeRefer(details) {
	if (!active) return;

	for (var i = 0; i < details.requestHeaders.length; ++i) {
	if (details.requestHeaders[i].name === 'Referer') {
	details.requestHeaders[i].value = 'http://www.google.com/';
	break;
	}

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}