Simon zwacky

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

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

Reposted from Qiita

For almost a year now, I've been using this "flux" architecture to organize my React applications and to work on other people's projects, and its popularity has grown quite a lot, to the point where it shows up on job listings for React and a lot of people get confused about what it is.

Why I'm tired of using and teaching flux

There are a billion explainations on the internet, so I'll skip explaining the parts. Instead, let's cut to the chase -- the main parts I hate about flux are the Dispatcher and the Store's own updating mechanism.

If you use a setup similar to the examples in facebook/flux, and you use flux.Dispatcher, you probably have this kind of flow:

	// How do I setup OpenID with Steam?
	// =========================
	// OpenID is an authentication strategy where an unauthenticated user visits
	// your site then authenticates themselves by logging in to Google, Twitter,
	// Facebook, Steam, or some other OpenID "provider. Your server (the
	// OpenID Relying Party) exchanges keys with the OpenID Provider (Google,
	// et. al.) then sends the user over to the OpenID Provider to log in.
	//
	// After the user logs in with the OpenID Provider, the user is sent back to
	// you with some information identifying who they are, signed by the key you

	/**
	* ================== angular-ios9-uiwebview.patch.js v1.1.1 ==================
	*
	* This patch works around iOS9 UIWebView regression that causes infinite digest
	* errors in Angular.
	*
	* The patch can be applied to Angular 1.2.0 – 1.4.5. Newer versions of Angular
	* have the workaround baked in.
	*
	* To apply this patch load/bundle this file with your application and add a

	// For quickly trying things out in the browser, jQuery and Lo-Dash (like Underscore.js) are great.

	// Read the code below (never copy & paste code you don't trust),
	// then you can copy & paste it into the browser console to load jQuery & lodash.


	(function () {

	var jq = document.createElement('script');
	jq.src = 'https://code.jquery.com/jquery-2.1.4.js';

	-- === sizeup ===
	--
	-- SizeUp emulation for hammerspoon
	--
	-- To use, you can tweak the key bindings and the margins

	local sizeup = { }

	--------------
	-- Bindings --

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var less = require('gulp-less');

	var paths = {
	lessFile: 'includes/css/styles.less',
	lessFiles: 'includes/css/*.less',
	cssDir: 'includes/css'
	};

	function getWatchers(root) {
	root = angular.element(root \|\| document.documentElement);
	var watcherCount = 0;

	function getElemWatchers(element) {
	var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
	var scopeWatchers = getWatchersFromScope(element.data().$scope);
	var watchers = scopeWatchers.concat(isolateWatchers);
	angular.forEach(element.children(), function (childElement) {
	watchers = watchers.concat(getElemWatchers(angular.element(childElement)));