John van Keulen sjonner

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

This is a little backwards, especially when apps are used under real-world network (3G) and device

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree

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 http2 = require('http2');
	const fs = require('fs');
	const path = require('path');
	const zlib = require('zlib');
	const brotli = require('brotli'); // npm package

	const PORT = 3032;
	const BROTLI_QUALITY = 11; // slow, but we're caching so who cares
	const STATIC_DIRECTORY = path.resolve(__dirname, '../dist/');
	const cache = {};

	// routes.js
	const routes = [
	{
	path: '/',
	component: Home,
	exact: true
	},
	{
	path: '/gists',
	component: Gists

	/* global localStorage */
	import {observable, autorunAsync} from 'mobx'
	import _ from 'lodash'

	function storedObservable (key, defaultValue, debounce) {
	let fromStorage = localStorage.getItem(key)
	const defaultClone = _.cloneDeep(defaultValue) // we don't want to modify the given object, because userscript might want to use the original object to reset the state back to default values some time later
	if (fromStorage) {
	_.merge(defaultClone, JSON.parse(fromStorage))
	}

	<?xml version="1.0" encoding="utf-8"?>
	<Project DefaultTargets="PrepareStaticContent" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
	<PropertyGroup>
	<!-- Passed in Parameters -->
	<configuration></configuration>
	<workingDir></workingDir>
	<buildNumber></buildNumber>
	<buildViews>false</buildViews>
	<minifyJs>true</minifyJs>
	<TargetsDirectory></TargetsDirectory>

	using System;
	using System.Collections.Generic;
	using System.Data.SqlClient;
	using System.Linq;
	using System.Collections;
	using System.Data;

	namespace SqlParameterHelper
	{
	/// <summary>

	function logClass(target: any) {

	// save a reference to the original constructor
	var original = target;

	// a utility function to generate instances of a class
	function construct(constructor, args) {
	var c : any = function () {
	return constructor.apply(this, args);
	}

	//...
	showSchoolDetailPage: function (req, res) {

	if (!req.param('id')) {
	return res.badRequest('The id of the school (`id`) is a required parameter!');
	}

	// Look up the school, it's associated image, and the associated list of students.
	School.findOne({
	id: req.param('id')