Max D plugn

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

	{
	"parserOptions": {
	"ecmaVersion": 2017,
	"sourceType": "module",
	"parser": "babel-eslint"
	},
	"settings": {
	"import/resolver": {
	"alias": {
	"map": [

	// Remove Duplicates from an array
	const removeDuplicates =
	arr => arr.filter((item, index) => index === arr.indexOf(item));

	const removeDuplicates1 = array => [...new Set(array)];

	const removeDuplicates2 = array => Array.from(new Set(array));


	// Flattens an array(doesn't flatten deeply).

	[alias]
	co = checkout
	cob = checkout -b
	coo = !git fetch && git checkout
	br = branch
	brd = branch -d
	brD = branch -D
	merged = branch --merged
	dmerged = "git branch --merged \| grep -v '\\*' \| xargs -n 1 git branch -d"
	st = status

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.outer {
	display: table;
	position: absolute;

	<!DOCTYPE html>
	<html>
	<head><style>
	.outer {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	$svgIcons:(
	{{#svgs}}
	'{{name}}': '{{{inline}}}' {{width}} {{height}},
	{{/svgs}}
	);


	@function str-replace($string: '', $search: '', $replace: '') {
	$index: str-index($string, $search);
	@if $index {

	.flex-row {
	display: flex;
	flex-direction: row;
	width: 100%;
	min-height: 0;
	}

	.flex-col {
	display: flex;
	flex-direction: column;

	/**
	* @author Max L Dolgov
	* @description getting cookies utility
	*/

	export const getCookies = () => document.cookie.split(';').map(s => s.trim().split('='))

	export const getCookie = cookieName => (getCookies().find(v => v[0] === cookieName) \|\| [])[1]

	export const getCookiesMap = () => getCookies().reduce(reducer = (acc, v) => ({ ...acc, [v[0]]: v[1] }), {})

	<template>
	<div>

	<sui-grid v-if="filter">
	<sui-grid-column>
	<input-plus placeholder="Search..." icon="search" v-model="query" />
	</sui-grid-column>
	</sui-grid>

	<sui-table>