Dmytro Voronianski voronianski

Donation Button

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

Here's my own list of the interesting stuff announced during this year's WWDC, collected from the keynotes, various Apple docs, blog posts and tweets.

If you're planning to watch the videos, I really recommend this Mac app that helps you download and watch them: https://github.com/insidegui/WWDC.

OS X El Capitan

http://www.apple.com/osx/elcapitan-preview/

split view - two apps side by side on full screen

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

voronianski/flux-comparison app spec(unofficail).

Step1

When: Add to Cart "iPad 4 Mini - €500.01" * 1
- Then: "iPad 4 Mini - €500.01 x 1" in your cart.
When: Checkout the cart

	/*
	The MIT License (MIT)

	Copyright (c) 2015 Ingvar Stepanyan

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is

	Adyen Test Card Numbers
	These cards are only valid on our TEST system and they will never involve any actual transaction or transfer of funds. The TEST card numbers will not work on the Adyen LIVE Platform.

	For all cards use the following expiration and CVV2/CVC2/or CID for Amex.

	For all cards:

	Expiration Dates CVV2 / CVC3 CID (American Express)
	08/2018 OR 10/2020 737 7373

	/**
	* Stores are just seed + reduce function.
	* Notice they are plain objects and don't own the state.
	*/
	const countUpStore = {
	seed: {
	counter: 0
	},

	reduce(state, action) {

	// store.js
	let {store, handler} = sto(initialState, reduceFn); // where reduceFn: function(currentState, action, ...args){}

	dispatcher.register(handler);
	export store;

	// elsewhere
	store.get() // -> current state

	store.toObservable() // -> to be used with .observe()

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };