Gokulakrishnan Kalaikovan gokulkrishh

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...

With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent function over and over again. (See here for an explanation how it works with webpack 1)

Example:

<Router history={history}>
  <Route
    path="/"

Service Worker - offline support for the web

Progressive apps - high-res icon, splash screen, no URL bar, etc.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul

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

	#!/usr/bin/env bash #adding this to force silly gist highlighting. REMOVE THIS

	# This is a modified version of the script generated by https://docs.npmjs.com/cli/completion to include `npm install` autocompletion.
	# Basically we added `if` blocks to check for `install` subcommand.

	###-begin-npm-completion-###
	#
	# npm command completion script
	#
	# Installation: npm completion >> ~/.bashrc (or ~/.zshrc)

	/*
	Copyright 2016 Google Inc. All Rights Reserved.
	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at
	http://www.apache.org/licenses/LICENSE-2.0
	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and

	'use strict';

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	(function() {

	// Update 'version' if you need to refresh the cache
	var staticCacheName = 'static';
	var version = 'v1::';


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */

	[{"key":"320 x 480","name":"iPhone 3/4/S","width":320,"height":480},
	{"key":"320 x 568","name":"iPhone 5/C","width":320,"height":568},
	{"key":"375 x 667","name":"iPhone 6/S","width":375,"height":667},
	{"key":"414 x 736","name":"iPhone 6/S Plus","width":414,"height":736},
	{"key":"768 x 1024","name":"iPad1/2/3/4/Air","width":768,"height":1024},
	{"key":"1024 x 1366","name":"iPad Pro","width":1024,"height":1366},
	{"key":"320 x 533","name":"Samsung S/S2/S3mini","width":320,"height":533},
	{"key":"360 x 640","name":"Samsung S3/S4/S5/Note2/3/4","width":360,"height":640},
	{"key":"400 x 640","name":"Samsung Note","width":400,"height":640},
	{"key":"800 x 1280","name":"Samsung Galaxy Tab 8.9/10","width":800,"height":1280},

	<script charset="utf-8">
	<% if ENV["RAILS_ENV"] == "production" %>
	var script = "/react-app-bundle.js";
	<% else %>
	console.warn("Development mode. Make sure to start 'node devServer.js'");
	var script = "http://" + (location.host \|\| 'localhost').split(':')[0] + ":4000/react-app-bundle.js"
	<% end %>
	document.write('<script src="' + script + '"></' + 'script>');
	</script>