Ivan Hilkov 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

	import get from 'lodash/get'
	import { isDevelopment } from 'utils/isDevelopment'

	export const TEST_ID = {
	components: {
	LayerCard: {
	image: 'components.LayerCard.image',
	vector: 'components.LayerCard.vector',
	cad: 'components.LayerCard.cad',
	xyz: 'components.LayerCard.xyz',

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Chrome Canary",
	"type": "chrome",
	"request": "launch",
	"url": "http://localhost:3000",
	"webRoot": "${workspaceRoot}/src",
	"sourceMapPathOverrides": {

	// моожет быть либо 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`,
	);