Z 🏴‍☠️ zaydek

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

Why

Doing require extensions correctly is essential, because:

Users should be able to install multiple extensions in succession, and have them work together.
Coverage tools like nyc need it to reliably supply coverage information that takes into account sourcemaps from upstream transforms.
Because non-standard, un-predictable behavior causes hard to solve bugs, and major headaches for project maintainers.

What is a require extension anyways?

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

#	Name	Type 1	Type 2	Total	HP	Attack	Defense	Sp. Atk	Sp. Def	Speed	Generation	Legendary
1	Bulbasaur	Grass	Poison	318	45	49	49	65	65	45	1	False
2	Ivysaur	Grass	Poison	405	60	62	63	80	80	60	1	False
3	Venusaur	Grass	Poison	525	80	82	83	100	100	80	1	False
3	VenusaurMega Venusaur	Grass	Poison	625	80	100	123	122	120	80	1	False
4	Charmander	Fire		309	39	52	43	60	50	65	1	False
5	Charmeleon	Fire		405	58	64	58	80	65	80	1	False
6	Charizard	Fire	Flying	534	78	84	78	109	85	100	1	False
6	CharizardMega Charizard X	Fire	Dragon	634	78	130	111	130	85	100	1	False
6	CharizardMega Charizard Y	Fire	Flying	634	78	104	78	159	115	100	1	False

Aligning images

This is a guide for aligning images.

See the full Advanced Markdown doc for more tips and tricks

`left` alignment

1. Copy m3u8 link

2. Run command

echo "Enter m3u8 link:";read link;echo "Enter output filename:";read filename;ffmpeg -i "$link" -bsf:a aac_adtstoasc -vcodec copy -c copy -crf 50 $filename.mp4


	// ## matte
	//
	// Calculate the color created by flattened the input color against a base color with an opacity
	//
	// @param {Color} $color: foreground color
	// @param {Color} [$matte]: background color (or `transparent`) to matte the foreground against
	// @param {Number} [$opacity]: mixing opacity of the foreground color, analogous to layer opacity
	// in an image editor
	// @return {Color} the matted color

	'use strict';

	var http = require( "http" ),
	pathUtils = require( "path" ),
	express = require( "express" ),
	app = express(),
	PORT = process.env.PORT \|\| 5000,
	appDir = pathUtils.resolve( __dirname, "client" );

	app.use( express.static( appDir ) );

	// Mixin like functionality

	const textInput = props => `
	color: ${props.error ? color.white : color.base};
	background-color: ${props.error ? color.alert : color.white};
	`;

	export const Input = styled.input`
	${textInput}
	`;

	const readline = require('readline')
	const blank = '\n'.repeat(process.stdout.rows)
	console.log(blank)
	readline.cursorTo(process.stdout, 0, 0)
	readline.clearScreenDown(process.stdout)