Nathan Thorpe lobaak

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

Making Gatsby work with Internet Explorer 10 and 11

I created this gist in order to help myself and others keep track of tips and tricks in order to make Gatsby v2 play nicely with Internet Explorer 10 and 11.

This is experience based. Please share your experiences when you have a solution to a problem.

External compilation of modules

If you suspect that an es6-based module is breaking your app, then try to add gatsby-plugin-compile-es6-packages and include the package as one of the modules.

Data URI SVG icons with Leaflet

Demonstrates how to load SVG's as Leaflet icons via the data URI method.

Following was helpful to figure this out:

Promises

`new Promise()`

new Promise((resolve, reject) => {})

const getDinosaur = (name) => {
  return new Promise((resolve, reject) => {
    resolve({name})

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

	// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

	// Reboot
	//
	// Normalization of HTML elements, manually forked from Normalize.css to remove
	// styles targeting irrelevant browsers while applying new styles.
	//
	// Normalize is licensed MIT. https://github.com/necolas/normalize.css

	// just an example. A cleaner way is to wrap the showLine-stuff in a dedicated component
	<template>
	<div>
	<my-line v-if="showLine" :data="lineData" :options="options">
	</div>
	</template>

	<script>
	export default {
	data () {