Dan Codes dan-codes-16

Reasons for hash change

First build, for reference

       0.14ff9d89ef59e0542b1d.dev.js    1.55 kB    0, 7  [emitted]
       1.bcca8d49c0f671a4afb6.dev.js  708 bytes    1, 7  [emitted]
       2.6617d1b992b44b0996dc.dev.js  708 bytes    2, 7  [emitted]
       3.c8edca9c31923a566f7f.dev.js  403 bytes    3, 7  [emitted]
       4.c67fbd67a62782c31d1c.dev.js  403 bytes    4, 7  [emitted]
  vendor.3c35d30d5995c0e6e1c1.dev.js     259 kB    5, 7  [emitted]  [big]  vendor

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

	const express = require('express');
	const app = express();

	app.get('/', (req, res) => {
	res.setHeader('Content-Type', 'text/html; charset=utf-8');
	res.setHeader('Transfer-Encoding', 'chunked');

	res.write(`
	<!doctype html>
	<head>

	// This is an example of how to fetch external data in response to updated props,
	// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

	class ExampleComponent extends React.Component {
	_currentId = null;

	state = {
	externalData: null
	};

	class Nav extends React.Component {
	constructor() {
	super();
	this.onNav = this.onNav.bind(this);
	}
	onNav(idx) {
	// do something with `this` and `idx`
	}
	render() {
	return (

	import React, { Component, PropTypes } from 'react';

	export default class CreditCardField extends Component {
	static propTypes = {
	value: PropTypes.string,
	onChange: PropTypes.func,
	}
	static defaultProps = {
	value: ''
	}

	// Simple wrapper to use bootstrap's grid system to position elements side-by-side
	var VerticalFieldsElement = React.createClass({
	render: function() {
	return dom.div(
	{ className: 'clearfix' },
	React.Children.map(this.props.children, function(child) {
	if(!child) {
	return child;
	}

	var pureRender = (Component) => {
	Object.assign(Component.prototype, {
	shouldComponentUpdate (nextProps, nextState) {
	return !shallowEqual(this.props, nextProps) \|\|
	!shallowEqual(this.state, nextState);
	}
	});
	};

	module.exports = pureRender;

	/*
	* This work is free. You can redistribute it and/or modify it under the
	* terms of the Do What The Fuck You Want To Public License, Version 2,
	* as published by Sam Hocevar. See the COPYING file for more details.
	*/
	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	EasingFunctions = {

	What happens to localStorage when different browsers are in private browsing mode?

	Safari returns null for any item set using localStorage.setItem either before or during the private browsing session. In essence, neither sessionStorage or localStorage are available in private brosing mode

	Chrome and Opera return items set previous to private ("incognito") browsing, but once private browsing commences, treats localStorage like sessionStorage (only items set on the localStorage by that session will be returned) but like localStorage for other private windows and tabs

	Firefox, like Chrome will not retrieve items set on locaStorage prior to a private session starting, but in private browsing treats localStorage like sessionStoroage for non private windows and tabs, but like localStorage for other private windows and tabs