Arman Taherian armantaherian

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

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	import { useEffect, useRef, useState } from "react";

	const useMeasure = () => {
	const ref = useRef<HTMLDivElement>(null);
	const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 });
	const [ro] = useState(
	() => new ResizeObserver(([entry]) => set(entry.contentRect))
	);

	useEffect(() => {

	const inBrowser = typeof window !== 'undefined'
	const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
	const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
	const UA = inBrowser && window.navigator.userAgent.toLowerCase()
	const isIE = UA && /msie\|trident/.test(UA)
	const isIE9 = UA && UA.indexOf('msie 9.0') > 0
	const isEdge = UA && UA.indexOf('edge/') > 0
	const isAndroid = (UA && UA.indexOf('android') > 0) \|\| (weexPlatform === 'android')
	const isIOS = (UA && /iphone\|ipad\|ipod\|ios/.test(UA)) \|\| (weexPlatform === 'ios')
	const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

	// This is an advanced example! It is not intended for use in application code.
	// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
	// Most components should just initiate async requests in componentDidMount.

	class ExampleComponent extends React.Component {
	_hasUnmounted = false;

	state = {
	externalData: null,
	};

	// I pasted this without even looking at it. It the code running in the video here: http://youtu.be/OZ_9Yg0PG3M
	// The video is of an Arduino controlling a single 8x8 LED matrix via an MBI5026 chip + a single 74HC595 shift register.
	// Link to the MBI5026: http://www.rayslogic.com/propeller/programming/AdafruitRGB/MBI5026.pdf

	#define SDI 10
	#define CLK 9
	#define LE 8
	#define LED 17
	// 74HC595
	#define SHSDI 3 // DS (pin 14 on shift register)

	jQuery(document).ready(function() {
	//Set-up some constants.
	var scrollTimeout;
	var scrollUsePushStateInstead = false; //Set to true to make the history stack of the browser include every point when posts were loaded. It's kind of annoying.
	var scrollDelay = 200; //Milliseconds
	var scrollLoading = false;
	var triggerOffset = $(document).height() - $('#pagination').siblings().eq(-4).offset().top; //The point of this is to do one calculation up front instead of multiple calculations every time the infinite scroll is triggered.

	// Simple feature detection for History Management (borrowed from Modernizr)
	function supportsHistory() {

	/*
	MCP2515 CAN Interface Using SPI

	Author: David Harding

	Created: 11/08/2010
	Modified: 6/26/12 by RechargeCar Inc.

	For further information see:

	sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES;
	sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;

	// by the way, you need to logout and log back in for this to take effect. Or at least that's what
	// Quartz Debug says. Who knows, maybe it's lying?

	// P.S. Go to [Apple menu --> System Preferences --> Displays --> Display --> Scaled] after logging
	// back in, and you'll see a bunch of "HiDPI" resolutions in the list to choose from.

	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->