Jared Easterday Jiert

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

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

	function ProductsList() {
	const {loading, error, data} = useQuery(LIST_PRODUCTS);
	if (loading) return 'Loading...';
	if (error) return error.message;
	return (
	<ul>
	{data.products.map(product => (
	<li key={product.id}>{product.name}</li>
	))}
	</ul>

	const user = 'foo';

	// option 1: actions first

	const defaultState = {
	loading: false,
	error: null,
	properties: user
	};

	import React from 'react'
	import { withRouter, Link } from 'react-router-dom'
	import { graphql, compose } from 'react-apollo'
	import { Formik } from 'formik'
	import Yup from 'yup'

	import FormWideError from '../elements/form/FormWideError'
	import TextInput from '../elements/form/TextInput'
	import Button from '../elements/form/Button'
	import { H2 } from '../elements/text/Headings'

	import React from 'react'
	import { withRouter, Link } from 'react-router-dom'
	import { graphql, compose } from 'react-apollo'
	import { Formik } from 'formik'
	import Yup from 'yup'

	import FormWideError from '../elements/form/FormWideError'
	import TextInput from '../elements/form/TextInput'
	import Button from '../elements/form/Button'
	import { H2 } from '../elements/text/Headings'

	import React, { Component } from 'react';

	// Class Components
	export default class ClassComponent extends Component {
	handleClick(event) {
	event.preventDefault();
	console.log('The link was clicked');
	}

	render() {

	/node_modules/
	bundle.js