Asher Nguyen kidjp85

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()

Keybase proof

I hereby claim:

I am kidjp85 on github.
I am phucnguyen (https://keybase.io/phucnguyen) on keybase.
I have a public key ASAoDVmT81CttJZBI5pBfvUYg2jtxX6pVvEqnJF6Rnf4Igo

To claim this, I am signing this object:

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () =&gt; x) {

	Lesson 1 - Iterations
	- BinaryGap - https://codility.com/demo/results/trainingU2FQPQ-7Y4/

	Lesson 2 - Arrays
	- OddOccurrencesInArray - https://codility.com/demo/results/trainingFN5RVT-XQ4/
	- CyclicRotation - https://codility.com/demo/results/trainingSH2W5R-RP5/

	Lesson 3 - Time Complexity
	- FrogJmp - https://codility.com/demo/results/training6KKWUD-BXJ/
	- PermMissingElem - https://codility.com/demo/results/training58W4YJ-VHA/

	import React, {
	useContext,
	createContext,
	createElement,
	useEffect,
	useRef,
	useCallback,
	useState,
	} from 'react';
	import isEqual from 'react-fast-compare';

	import styled from 'styled-components'
	import { theme } from 'rebass'

	const { breakpoints } = theme
	const lastIndex = breakpoints.length - 1

	const getMediaBreakpoint = (breakpoints, breakpoint, index) => {
	if (index === 0) return `@media screen and (max-width: ${breakpoint})`
	const prevBreakpoint = breakpoints[index - 1]
	if (index === lastIndex) {

	import React from 'react'
	import PropTypes from 'prop-types'
	import { compose, pure, setPropTypes, withHandlers, withProps } from 'recompose'

	const Symbol = props => {
	const {
	style,
	handleMouseClick,
	handleMouseMove,
	backgroundNode,

	function *fibonacci(n) {
	const infinite = !n && n !== 0;
	let current = 0;
	let next = 1;

	while (infinite \|\| n--) {
	yield current;
	[current, next] = [next, current + next];
	}
	}