Alex Reardon alexreardon

`this` binding

this is the runtime context of a function.
this is determined by the call site
the same function can be executed with different this runtime contexts. You can think of this as another arguement to the function
Comparison: scopes are generally defined at compile time (exception: eval)

const person = {
 name: 'Alex',

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

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.

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

The goal is to have a link to ASTexplorer to demonstrate what each type is. Types have been broken into sections if they are not core parts of javascript (JSX, type annotations, typescript types), however are otherwise in alphabetical order.

WIP - un-added types have a leading ^^^^ while I am working on them.

Important Base Parts

Knowing these will help everywhere

identifier A named property, such as a declared variable or object property.
blockStatement Anything to be run as part of resolving an expression. (Effectively anything that would go between {} brackets, whether that is in a for statement, or function expression. It will be found as the body property of the expression.

	- uses: actions/upload-artifact@v1
	if: failure()
	with:
	name: cypress-screenshots
	path: cypress/screenshots
	- uses: actions/upload-artifact@v1
	if: always()
	with:
	name: cypress-videos
	path: cypress/videos

	{
	"zenMode.hideLineNumbers": false,
	"workbench.colorTheme": "Night Owl",
	"editor.quickSuggestions": {
	"other": false,
	"comments": false,
	"strings": false
	},
	"editor.wordBasedSuggestions": false,
	"editor.suggestOnTriggerCharacters": false,

	"use strict";

	[foo,bar] = TNG(foo,bar);
	// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's
	// basically like a "custom hook" that can be called only from other
	// TNG-wrapped functions

	function foo(origX,origY) {
	var [x,setX] = useState(origX);
	var [y,setY] = useState(origY);

	import {
	DragDropContext as RealDragDropContext,
	Droppable as RealDroppable,
	Draggable
	} from 'react-beautiful-dnd';
	import React, { Component } from 'react';


	const DroppableManager = {
	_onDragEndLookup: {},

	# this assumes your using oh-my-zsh for maximum zsh-ness
	# info and defaults are here:
	# https://github.com/robbyrussell/oh-my-zsh/blob/master/templates/zshrc.zsh-template

	export LC_ALL="en_US.UTF-8"
	export ZSH=/Users/bret/.oh-my-zsh

	# custom prompt theme
	ZSH_THEME="present" # mine is present, default is robbyrussell, also agnoster, fishy, ys, wild-cherry
	COMPLETION_WAITING_DOTS="true"