Hiroki Tani hiloki

谷さんからのおすすめリスト

UKロック的な

https://www.youtube.com/watch?v=jLYsIESNtUc

オルタナ感

Bloc Party - Banquet

エモみ

A

Acton’s Dictum

“Power tends to corrupt, and absolute power corrupts absolutely. Great men are almost always bad men [...]”

Amara’s Law

“We tend to overestimate the effect of a technology in the short run and underestimate the effect in the long run.”

Amdahl’s Law

The theoretical speedup is limited to at most 20 times the single thread performance (i.e., parallelization has diminishing returns).

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

マージ済みのリモートブランチを全て削除

git branch -r --merged master | grep -v -e master -e develop | sed -e 's% *origin/%%' | xargs -I% git push --delete origin %

remote の master に merge済みの branch をすべて表示して
master と develop は消えてほしくないので除外して
origin/ を削除して
xargs （-I% % でブランチ名を渡しつつ、全て削除する）

Incremental DOM

Introducing Incremental DOM — Google Developers — Medium

Reactやvirtual-dom、Glimmer(Ember)などVirtual DOMの実装は色々あるが、これらのVirtual DOM実装には2つの問題がある

既存のテンプレート言語を利用していない(しにくい)
モバイルでのパフォーマンス、特にメモリに関しては大きすぎる

これらを解決するためにIncremental DOMと言うものを作っている(WIP)

	figma.showUI(`<script>
	let imurl = 'https://66.media.tumblr.com/7af65560449c91e8cd82a4a3478f5e0b/tumblr_pb7bt5CTrS1qzdllao1_1280.jpg'
	fetch(imurl).then(r => r.arrayBuffer()).then(a =>
	parent.postMessage({ pluginMessage: ["imdata", new Uint8Array(a)] }, '*'))
	</script>`, { visible:false, width:200, height:200 })
	figma.ui.onmessage = msg => {
	if (msg[0] == "imdata") {
	let data = msg[1] as Uint8Array
	let imageHash = figma.createImage(new Uint8Array(data)).hash
	const rect = figma.createRectangle()

	/*
	* This script fetches all color styles from a Figma team/document.
	*
	* Dependencies:
	*
	* - node-fetch
	*
	* Due to a limitation in the Figma /styles endpoint, we need to use a
	* document for actually using the colors in a color grid 🙄That's why
	* we're both fetching from /styles and /files below.

	/**
	* This code is licensed under the terms of the MIT license
	*
	* Deep diff between two object, using lodash
	* @param {Object} object Object compared
	* @param {Object} base Object to compare with
	* @return {Object} Return a new object who represent the diff
	*/
	function difference(object, base) {
	function changes(object, base) {

	// go on you labels pages
	// eg https://github.com/cssnext/cssnext/labels
	// paste this script in your console
	// copy the output and now you can import it using https://github.com/popomore/github-labels !

	var labels = [];
	[].slice.call(document.querySelectorAll(".label-link"))
	.forEach(function(element) {
	labels.push({
	name: element.textContent.trim(),

	@charset "UTF-8";

	$state-chain-mixin-pseudo-syntax-legacy: false !default;

	@mixin state-chain($state-change-target, $state) {
	$selector: selector-append($state-change-target, ".st-#{$state}");
	$self: false;

	$state-chain-before-pseudo: "::before";
	$state-chain-after-pseudo: "::after";