Jimmy (HyounKyoung) Moon ragingwind

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

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] {

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）を定義する事が可能になります。以下はテンプレート文字列が提供する機能です。

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

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

	#!/bin/sh -e
	#

	# WigWag LLC
	# License: this script is public domain

	#
	# This will setup a shell to cross compile node.js (node 0.8 working for us) using cross tools
	# Example uses a Freescale tool chain...
	# Adjust vars below to your taste and good luck

	# -- mode: ruby --
	# vi: set ft=ruby :

	Vagrant.configure("2") do \|config\|
	# All Vagrant configuration is done here. The most common configuration
	# options are documented and commented below. For a complete reference,
	# please see the online documentation at vagrantup.com.

	# Every Vagrant virtual environment requires a box to build off of.
	config.vm.box = "ubuntu1204_64"

	angular.module('myApp', ['ngRoute'])
	.provider('Weather', function() {
	var apiKey = "";

	this.getUrl = function(type, ext) {
	return "http://api.wunderground.com/api/" +
	this.apiKey + "/" + type + "/q/" +
	ext + '.json';
	};

	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/"

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

	// 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)