Andrei Zvonkov zetagraph

** Not maintained **

For up-to-date references please see:

For 8.x-2.x branch: https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet
For the 3.x branch: https://git.drupalcode.org/project/twig_tweak/-/blob/3.x/docs/cheat-sheet.md

View

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

Ready State: Yes|No

This pull request is related to the following JIRA tickets:

1234: Sample Ticket A.

Requirements & Dependencies

This new module requires version xyz of module.
Requires pull request #148.

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

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

Free Hosting on GitHub

This guide will take you from zero webserver knowledge, to having your own free site hosted on GitHub. The only non-free bit is registering a domain name, which can be as cheap as $5/year.

This guide uses CrazyDomains as the Registrar, FreeDNS as the DNS, and GitHub as the Webserver.

1) Domain Registration and Setup

CSS Layout Debugger

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

	:root {
	// Grid proportions
	--grid-width: 960;
	--grid-column-width: 60;
	--grid-columns: 12;

	// Grid logic
	--grid-gutters: calc(var(--grid-columns) - 1);

	// Grid proportion logic

	/**
	* Settings
	*/

	var settings = {
	scripts: true, // Turn on/off script tasks
	polyfills: true, // Turn on/off polyfill tasks
	styles: false, // Turn on/off style tasks
	svgs: false, // Turn on/off SVG tasks
	static: false, // Turn on/off static file copying

	<?php

	/**
	* Add custom scripts
	*/
	function matt_page_alter(&$page) {
	$page['#attached']['library'][] = 'matt/matt-corescripts';
	}