Andrei Zvonkov zetagraph

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

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

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.

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?

** 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

	/**
	* 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

	: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