Jimmy Moon ragingwind

React HN (Universal rendering, Offline caching, optimisations)

Repo: https://github.com/insin/react-hn
Live: https://react-hn.appspot.com (Version with forced offline caching at https://react-hn-rest.appspot.com)
Detailed breakdown: https://gist.github.com/addyosmani/6e25174135f4f0095de77f07ecf068df
Lighthouse: First meaningful paint (target value: 1,000ms) 100 (382.25ms)
Lightouse: Speed Index (target value: 1,000) 98 (1330)
Preact HN - a Preact version of this app is also available

React + Webpack application using the PRPL pattern

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

Japanese translation from the original post in English.

原文: [Getting Literal With ES6 Template Strings by Addy Osmani] (http://updates.html5rocks.com/2015/01/ES6-Template-Strings)

#ES6のテンプレート文字列

従来のJavaScriptの文字列処理はPythonやRubyに比べて非力でしたが、ES6のテンプレート文字列はこの状況を根本的に覆します。（テンプレート文字列はChrome 41からサポートされています。）それによりプログラマはドメイン固有言語（domain-specific language、DSL）を定義する事が可能になります。以下はテンプレート文字列が提供する機能です。

文字列の挿入
式を文字列に埋め込む

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	/**
	* Implementation of an SortedMap using Left-leaning Red-Black Tree
	*
	* Original paper on Left-leaning Red-Black Trees:
	* - http://www.cs.princeton.edu/~rs/talks/LLRB/LLRB.pdf
	*
	* Invariant 1: No red node has a red child
	* Invariant 2: Every leaf path has the same number of black nodes
	* Invariant 3: Only the left child can be red (left leaning)
	*/

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="manifest" href="https://jsbin-user-assets.s3.amazonaws.com/kinlan/manifest.json">
	<title>iOS Manifest Polyfill</title>
	</head>
	<body>

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

	{
	"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",

	VAGRANTFILE_API_VERSION = "2"

	Vagrant.configure(VAGRANTFILE_API_VERSION) do \|config\|

	config.vm.box = "2creatives-centos65-652"
	config.vm.box_url = "https://github.com/2creatives/vagrant-centos/releases/download/v6.5.2/centos65-x86_64-20131219.box"
	config.vm.hostname = "mymachine.com"

	config.vm.synced_folder "salt/root/", "/srv/"