Xin(Khalil) Zhang starandtina

Things I believe

This is a collection of the things I believe about software development. I have worked for years building backend and data processing systems, so read the below within that context.

Agree? Disagree? Feel free to let me know at @JanStette.

Fundamentals

Keep it simple, stupid. You ain't gonna need it.

Tech Lead Book

Introduction
What is a Tech Lead?
The Tech Lead Mindset
Becoming a Tech Lead
Working Cross-Functionally
The Art of Delegation
Technical Best Practices
Effective Decision Making

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

	import React from 'react';

	export class StateDispatcher extends React.Component {
	constructor(props) {
	super(props);
	this.state = props.state \|\| {};
	this._dispatch = this.dispatch.bind(this);
	}

	dispatch(action) {

	const some_module = require('some_module')

	/**
	* require('some_module') calls Module._load
	*
	* Module._load then tries to load the module with a filename (also save it to the cache) using module.load(filename)
	*
	* module.load(filename), given a filename, passes it to the proper extension handler ('.js', '.json')
	*
	* If there were any errors when loading the file, it deletes the file from the cache (delete Module._cache[filename]) and throws an error

	const timing = store => next => action => {
	performance.mark(`${action.type}_start`);
	let result = next(action);
	performance.mark(`${action.type}_end`);
	performance.measure(
	`${action.type}`,
	`${action.type}_start`,
	`${action.type}_end`
	);
	return result;

	import { h, Component } from 'preact';


	/** Creates a new store, which is a tiny evented state container.
	* @example
	* let store = createStore();
	* store.subscribe( state => console.log(state) );
	* store.setState({ a: 'b' }); // logs { a: 'b' }
	* store.setState({ c: 'd' }); // logs { c: 'd' }
	*/

	/*
	Utility to analyze bundle chunks over versions.

	Assumes: webpack has already created the bundle summary json file -> stats.json
	Parameters:
	version: (Optional) a string that labels the current bundle with the version
	provided and saves the summary in a csv file.

	Output:
	If run the first time, generates a csv file bundleAnalaysis.csv, which

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}