swennemans

1. For new projects run mix phoenix.new with --no-brunch option and for existing projects remove brunch related things.

2. create package.json file:

echo '{"private": true}' > package.json

3. install webpack and loaders you want to use:

swennemans

Latency numbers every programmer should know

L1 cache reference ......................... 0.5 ns
Branch mispredict ............................ 5 ns
L2 cache reference ........................... 7 ns
Mutex lock/unlock ........................... 25 ns
Main memory reference ...................... 100 ns             
Compress 1K bytes with Zippy ............. 3,000 ns  =   3 µs
Send 2K bytes over 1 Gbps network ....... 20,000 ns  =  20 µs
SSD random read ........................ 150,000 ns  = 150 µs

Read 1 MB sequentially from memory ..... 250,000 ns = 250 µs

swennemans

#GPU & Composting in Blink and Chrome

summaried from Chromium documents and other resources

##Background

###Stacking Contexts Positioned elements(relative, absolute, fixed) with a z-index group of layers into a isolated layer

swennemans

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

swennemans

Performance Conditionally Rendered Content in React

First, this is not about if in JSX. It's just the simplest example to talk about (and a lot of people tried to do it at first a long time ago).

Some react components conditionally render content. When React first went public, a lot of us coming from handlebars really wanted "if" syntax. This gist isn't just about If components though, it's about

swennemans

import React from 'react';

const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;

swennemans

import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';

const App = () => {
  render() {
    return (
      <Router>
        <Route

swennemans

// @flow

function getOptions() {
  return { num: 42, str: "val" };
  //     ^ Type of this return is inferred without type annotation.
}

/*::
// ^ Comments like this are part of Flow's Comment Syntax.
//   They allow you to include any additional syntax and Flow will parse it