bzzz ivan-hilckov

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

Charts

Libs

https://github.com/storybooks/storybook

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

	// моожет быть либо id либо layer_id
	// id может быть {'layer_id': 2} или {'label_id': 2}
	// сунуть первым в лейбл с -- top_id (всегда int) - label_id; либо null (или вообще не приходит) - чтобы сунуть в корень на самый верх
	// left_id может быть {'layer_id': 2} или {'label_id': 2} - узел с left_id будет НАД узлом с передаваемым id

	// rename
	/api/labels/5/ PATCH {'id': 1, 'name': 'NEW NAME AHAHA'} // новое имя

	//move
	/api/labels/5/ PUT {'id': {'layer_id': 2}, 'top_id': 3}

	const tree = {
	{2, name},
	{99, name},
	{
	id: 100,
	name,
	children: [

	{3, name},
	{4, name},

	html {
	/* Adjust font size */
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	/* Font varient */
	font-variant-ligatures: none;
	-webkit-font-variant-ligatures: none;
	/* Smoothing */
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;

	import axios from "axios";

	export default async function () {
	const { data: { id } } = await axios.get("//localhost:3000/id");
	const { data: { group } } = await axios.get("//localhost:3000/group");
	const { data: { name } } = await axios.get(`//localhost:3000/${group}/${id}`);

	console.log(name); // Michał
	}

	1 No one merges their own code
	2 Never push directly to master
	3 If you're working with UI, get a design review
	4 If you're working on copy, get a copy review
	5 Never, ever push directly to master

	Rules are more like...
	guidlines. 😅

	const userTiming = () => (next) => (action) => {
	if (performance.mark === undefined) return next(action);
	performance.mark(`${action.type}_start`);
	const result = next(action);
	performance.mark(`${action.type}_end`);
	performance.measure(
	`${action.type}`,
	`${action.type}_start`,
	`${action.type}_end`,
	);

	{
	test: /(?<!\.module)\.scss$/,
	use: [
	require.resolve('style-loader'),
	{
	loader: require.resolve('css-loader'),
	options: {
	importLoaders: 1,
	},
	},