I had lots of issues getting setup with Universal Analytics (UA) with a one page app I've had to work on very recently. This tutorial will not explain very much because I believe the issue with UA is not that it's hard, but rather that there's a lack of information out there. This will help you get started on tracking pageviews for your one page application.

Prerequisites:

• A Google Tag Manager Universal Analytics (UA) account
• A Google Analytics account or other analytics platform (but this tutorial won't cover those)

1. Create a Data Layer

A data layer stores information from our code and passes that on to UA automatically.

All you need to do is declare a dataLayer array. Optionally it can have default values for your variables.

<!-- Google Tag Manager Data -->
  <script type="text/javascript">
    var dataLayer = [{'variableName' : 'variableOptionalValue'}];
  </script>
  <!-- Google Tag Manager Code -->
  ...
  <!-- End Google Tag Manager Code -->

Next, add an event listener (such as onClick) to your HTML so you know when the user interacts with something.

<a onClick="uaClick">

And finally, add the data to the dataLayer so UA can keep track of it.

$scope.uaClick = function(pageName) {
  	dataLayer.push({'pageName': 'index'});
  };

Notes:

• Make sure the dataLayer instantiation comes before the Google Tag Manager Code
• Use dataLayer.push({'variableName' : 'variableData'});

2. Creating a Variable

1. Go to the Variables tab on the left menu.
2. Create a new User-Defined Variable.
3. Set Variable Name to anything, set Data Layer Variable Name to your variableName.
4. Data Layer Version to Version 2 and optional default value.

3. Creating a Trigger

1. Go to the Triggers tab.
2. Create a new Trigger.
3. The event we are probably listening for is a Click event, but this is where things may become ambiguous.
4. I wanted all the click events from the variableName to be registered so I did:

This matches any word or letter and number combination.

5. The rest of the options should be self explanatory.

4. Creating a Tag

Now we are bringing together the components we have created from the other parts. Note that for testing on localhost, you need to set

1. Go to the Tags tab.
2. Create a new Tag.
3. Set tracking ID to your Google Analytics tracking ID.
4. Set Track Type to Page View.
5. Under Basic Configuration, set Document Path to {{Page URL}}/{{Variable Name}} to create the page URL.
6. Set Document Title to {{Variable Name}} to set the page
7. If you are testing on localhost, go to Advanced Configuration and set Use Debug Version to True.

If you have any questions, send me a message [here](http://rileedesign.com).

Resources:

1. http://cutroni.com/blog/2012/10/01/all-about-google-tag-manager/
2. https://developers.google.com/analytics/devguides/collection/upgrade/reference/gtm
3. https://support.google.com/tagmanager/answer/6106716
4. http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
5. https://developers.google.com/tag-manager/devguide
6. http://www.razorsocial.com/google-tag-manager/

Support Forums:

1. https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!forum/tag-manager
2. http://stackoverflow.com/questions/tagged/universal-analytics

I had the excellent idea to develop an AgarIO clone, which would allows friends to join each other easier and to have a more efficient rendering engine.

Things Go Wrong

Soon after starting, I realized I'd made a number of serious mistakes, but I've learned a lot along the way.

The first mistake was cloning a game without providing any true benefit because AgarIO actually has a gamemode where you can join your friends and seems to be improving its rendering engine over time.

The second mistake I made was assuming such a game would be easy to develop and a game engine would not be necessary. I could have never been further off from reality; collision handling and rendering efficiently [ to name a few] are hard.

Nonetheless, I keep pushing onwards because I get to learn a ton of stuff.

Collision Detection and Handling

Detecting a collision between to circles is not hard. Find the distance between the position of two circles, if that distance is greater than the radii added, there is a collision.

Handling a collision similar to AgarIO does it is much harder and I'll save that for a post in the future because I haven't completely ironed out my algorithm.

Client and Server Communication

I used SocketsIO, NodeJS, and ExpressJS for the backend of this project. I encode and decode requests using binary JSON.

When a client connects to the server, they receive information about the entire map state (players, viruses, and food). After that, they send input events (mousemove, w keypress, and space keypress). The server uses this input to simulate the map at some number of ticks per second.

Say a client sends a mousemove event, this means they've changed the direction their cells are moving towards. The server will receive this and updates its cell objects for this client accordingly and will send the new velocity to the other players.

The clients do not compute any important logic (collisions with viruses, other players' cells, splitting, shooting, etc.), they just interpolate from the velocity and position received from the server. This prevents cheating, but retains responsiveness on the frontend.

I'm still working out how to determine exactly what data the server should be sending the clients and when/ how often.

Rendering

The way I render currently has become a bit of a monstrosity.

Players' cells are rendered in the DOM and animated with the top and left styles so they do not have to be redrawn to a canvas every time they move.

Viruses and food are rendered on separate canvases and are only re-rendered when a food or viruses moves, is added, or is removed. There is potential for improvement by using a quadtree. I haven't quite gotten around to that.

Issues

• My render and logic loops are separate. I try to keep track of state changes made by the logic loop so rendering can be performed as efficiently as possible, but this introduces a lot of complexity that I haven't figured out how to eliminate
• Similarly, determining how to track and send state changes to the client from the server while using the least bandwidth possible is difficult
• Collision handling will require me to do a bit more vector math on paper

Moving Forward

I'll continue to update as I solve each of these issues. If you have any questions or would like me to expand more on any of these topics, I'd be glad to do it.

tl;dr Use a game engine.

Now, if you're actually looking to build a production quality game, do not try building your game engine. People have spent thousands (or more) of hours making these engines stable.

Matrices

I started this project with no knowledge about vectors and matrices. I won't go into detail about them, but I'll guide you in the right direction.

Entities (such as tanks) have a bounding box, which describes their shape and location on the map.

When the entity rotates or moves, its bounding box needs to be updated. For rotation, use a rotation matrix. For movement, just move/ translate each bounding box vertex by the amount the entity translated.

For rotation matrices, I created a general purpose function to multiply two matrices. Pass it a rotation matrix:

[
	[ Math.cos( angle ), -Math.sin( angle ) ],
	[ Math.sin( angle ), -Math.cos( angle ) ]
]

And pass it a bounding box vertex coordinate:

[
	[ 43110 ],
	[ 41 ]
]

And it will give you a rotated coordinate. Rotating a tank barrel is a bit different though because it's rotating around one of its ends. I used a transform origin for this. Essentially, add or subtract a certain amount to each vertex to change how the shape rotates.

Say we have a rectangle with coordinates: (-2, 1), (2, 1), (-2, -1), and (2, -1). We want to rotate it around the point: (-2, 0).

1. Add 2 to each point's x-coordinate: (0, 1), (4, 1), (0, -1), and (4, -1)

2. Perform the rotation

3. Subtract 2 from the resulting points' x-coordinates

Matrix multiplication code:

multiply_matrices( matrix_a = [], matrix_b = [] )
	multiply_matrices( matrix_a = [], matrix_b = [] )
{
	if ( matrix_a.length === 0 || matrix_b.length === 0 )
		return [];
	// Number of rows in matrix_a
	let height = matrix_a.length;
	// Number of columns in matrix_b
	let width = matrix_b[ 0 ].length;
	// Create an empty matrix to store the result
	let matrix = Array( height );
	// Iterate through each row of matrix_a
	for ( let a_y = 0; a_y < height; a_y++ )
	{
		let a_row = matrix_a[ a_y ];
		matrix[ a_y ] = Array( width );
		// Iterate through each column of matrix_b
		for ( let b_x = 0; b_x < width; b_x++ )
		{
			let cell = 0;
			// Iterate through the bigger of the width of matrix_a or height of matrix_b
			for ( let i = 0; i < Math.max( a_row.length, matrix_b.length ); i++ )
			{
				cell += a_row[ i ] * matrix_b[ i ][ b_x ];
			}
			matrix[ a_y ].push( cell );
		}
	}
	return matrix;
}

Other Parts

2. Collisions

3. Interpolation

There are plenty of useful resources on collision detection:

• http://www.dyn4j.org/2010/01/sat/
• http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169
• http://www.metanetsoftware.com/technique/tutorialA.html
• https://github.com/rjdlee/Tanks/blob/master/src/common/collision/collision.js (my own code)

I did not find so much on collision handling. Once you've detected a collision between two convex shapes, you need to figure out what to do with the objects. Should they push each other around? Should their velocities cancel out?

In Tanks, I used two methods. If a tank collides when moving forwards or backwards, it should slide along the other surface. If a tank collides when turning, it should seemingly push off the other surface.

When detecting collisions, it is important to find the exact surface your object is colliding on. To find the surface, find the surface with the least overlap.

After that, simply project the velocity of the moving object onto that surface's vector. If the moving object is colliding with more than one surface, you can project its velocity multiple times.

One thing to note is when trying to move away from a surface, if the moving object is detected as colliding, its velocity may continually be projected on the surface and the object will not be able to move away. This can be solved by ensuring the object is no longer colliding with the surface after detection or determining its direction relative to the surface.

When a tank rotates, find how much it overlaps the surface and the surface it is colliding with. And move away using the normal of the surface multiplied by the length of the overlap.

var displacementVector = {
	x: overlap * surface.y,
	y: overlap * surface.x
};
if ( surface.x < 0 )
	displacementVector.y = -displacementVector.y;
if ( surface.y < 0 )
	displacementVector.x = -displacementVector.x;
this.move( displacementVector.x, displacementVector.y );

I apologize if this was not clear, I did plan for these posts to be much better thought out, but I'm trying to free up my time for other things.

Other Parts

1. Matrices

3. Interpolation

When I was programming the initial version of multiplayer Tanks, I forgot about the effects of latency on gameplay and only saw the effects manifest on the live version.

There are a number of resources on this subject, but those don't make it too much easier to implement.

• https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking
• http://gafferongames.com/networked-physics/snapshots-and-interpolation/
• http://www.gabrielgambetta.com/fpm3.html

I followed the methods above and implemented a snapshot system on the server. It produces compressed versions of my game's map and all its entities at set intervals. Then, I created code to load past snapshots of my game and replay changes on top of those.

An issue I noticed with my current code is when I rewind my game to a past snapshot, I can't take snapshots of it (otherwise I'd be snapshotting old states). This can lock up the game for a long time. The solution to this would be to have a map specifically for replaying old versions running in parallel to the actual map. It may be a bit difficult to converge the replaying map into the actual map, though.

The snapshot system also allowed me to produce a list of changes between two snapshots, which I could send to clients periodically to update them with information about the game's current state.

I hope you enjoyed my short series on game development, once again, I apologize for the brevity of it.

Other Parts

1. Matrices
2. Collisions

Now, we are going to use it to control a stepper motor. Specifically, the L298N Dual H Bridge DC Stepper Motor Controller and the 28BYJ-48 5V DC Stepper Motor.

L298N:

28BYJ-48:

Here is the reference table from the previous tutorial:

Wiring

Motor Controller to Board

Let's start by connecting the motor controller (L298N) to the board (WeMos D1).

Using pliers, pull the caps off ENA and ENB (I have no idea what they're for):

Using male to female DuPont jumper wires, make the following connections:

Motor Controller to Motor

Here's a diagram of the 28BYJ-48 stepper motor:

If you compare this diagram to the actual motor, the colours of the wires connected to the motor correspond. Remember this when connecting the motor.

Using male to male DuPont jumper wires, make the following connections:

Motor Controller to Power

We need to supply the motor controller with power. You can use any DC (7 - 35V).

1. If your power supply doesn't have two wires coming from it (hot and ground), you'll have to cut it and strip the two ends.
2. Plug the power supply's hot end into +12V on the motor controller.
3. I recommend a breadboard for this part. Connect the GND on the motor controller (with a male to male jumper), the motor's red wire, one of the GND's on the board, and the power supply's ground together. This is called tying the grounds together.

Code

If you read about bipolar and unipolar stepper motors, you will understand the following code. Basically, the magnets in the motor must turn on in a sequence to rotate the motor's head.

Remember the pins may look random, but correspond to the digital I/O ports as seen in the table at the top of this tutorial.

/*
 * Driving a 5V stepper motor using Keyes L298N Dual Motor Driver;
 * Chienline @2015;
 */
const int ENA = 7;
const int IN1 = 6;
const int IN2 = 5;
const int ENB = 8;
const int IN4 = 9;
const int IN3 = 10;
const int ledPin = 13;
void setup()
{
  pinMode(ENA,OUTPUT);
  pinMode(IN1,OUTPUT);
  pinMode(IN2,OUTPUT);
  pinMode(ENB,OUTPUT);
  pinMode(IN3,OUTPUT);
  pinMode(IN4,OUTPUT);
  pinMode(ledPin,OUTPUT);
  digitalWrite(ledPin, LOW);
  //delay is used to control the speed, the lower the faster.
  //reverse(step,delay);
  reverse(80,20);
  //forward(step,delay);
  forward(80,20);
}
void loop()
{
}
void reverse(int i, int j) {
  // set both motors ON
  digitalWrite(ENA, HIGH);
  digitalWrite(ENB, HIGH);
  while (1)   {
    digitalWrite(IN1, 0);
    digitalWrite(IN2, 1);
    digitalWrite(IN3, 0);
    digitalWrite(IN4, 1);
    delay(j);
    i--;
    if (i < 1) break; 
    digitalWrite(IN1, 0);
    digitalWrite(IN2, 1);
    digitalWrite(IN3, 1);
    digitalWrite(IN4, 0);
    delay(j);  
    i--;
    if (i < 1) break;
    digitalWrite(IN1, 1);
    digitalWrite(IN2, 0);
    digitalWrite(IN3, 1);
    digitalWrite(IN4, 0);
    delay(j);
    i--;
    if (i < 1) break;
    digitalWrite(IN1, 1);
    digitalWrite(IN2, 0);
    digitalWrite(IN3, 0);
    digitalWrite(IN4, 1);
    delay(j);  
    i--;
    if (i < 1) break;
  }
  // set both motors OFF
  digitalWrite(ENA, LOW);
  digitalWrite(ENB, LOW);
}  // end reverse()
void forward(int i, int j) {
  // Set both motors ON
  digitalWrite(ENA, HIGH);
  digitalWrite(ENB, HIGH);
  while (1)   {
    digitalWrite(IN1, 0);
    digitalWrite(IN2, 1);
    digitalWrite(IN3, 0);
    digitalWrite(IN4, 1);
    delay(j);  
    i--;
    if (i < 1) break;
    digitalWrite(IN1, 1);
    digitalWrite(IN2, 0);
    digitalWrite(IN3, 0);
    digitalWrite(IN4, 1);
    delay(j);
    i--;
    if (i < 1) break;
    digitalWrite(IN1, 1);
    digitalWrite(IN2, 0);
    digitalWrite(IN3, 1);
    digitalWrite(IN4, 0);
    delay(j);  
    i--;
    if (i < 1) break;
    digitalWrite(IN1, 0);
    digitalWrite(IN2, 1);
    digitalWrite(IN3, 1);
    digitalWrite(IN4, 0);
    delay(j);
    i--;
    if (i < 1) break;
  }
  // set both motors OFF
  digitalWrite(ENA, LOW);
  digitalWrite(ENB, LOW);
}  // end forward()

Code courtesy of: http://www.instructables.com/id/Driving-Bi-Polar-Stepper-Motor-with-Keyes-L298N/?ALLSTEPS

Final Words

Once again, I will not be talking about the WeMos D1/ ESP8266's WIFI since there are many other tutorials out there for that.

I now have to decide what I'm going to do with this WIFI-capable stepper motor. I was originally going to make some blinds, but I don't have enough blinds to make it worth it.

Hopefully, you've enjoyed this tutorial, if you have any questions or comments, please get in touch with me.

Getting Started

1. Download and install the Arduino IDE (just called Arduino): https://www.arduino.cc/en/Main/Software Note: I use version 1.6.8, newer versions may not work.
2. Open Arduino
3. Open File → Preferences
4. Copy and paste http://arduino.esp8266.com/stable/packageesp8266comindex.json into Additional Boards Manager URLs field. You can add multiple URLs, separating them with commas
5. Open Tools → Board:xxx → Boards Manager and install esp8266 by ESP8266 Community
6. Open Tools → Board:xxx and select WeMos D1 R2 & mini.
7. Open Tools → Upload Speed and select 115200. If you're brave, you can try 230400 to upload code to the board faster, but watch the console for errors.
8. Download a driver so your Mac recognizes the WeMos D1 board (the site looks sketchy, but I can confirm the driver is legit): Note: This driver is needed for both real and knockoff D1 boards. http://www.wch.cn/download/CH341SERMACZIP.html
9. Plug your WeMos D1 board into your Mac using a micro USB.
10. Open Tools → Port:xxx and in the dropdown, select the option with "usb" in its name.
11. Your Tools dropdown should look like this:

Testing

1. To make sure everything is working properly, let's download WeMos' example files: https://github.com/wemos/D1miniExamples/archive/master.zip
2. Rename the uncompressed directory to D1miniExamples
3. In Arduino, open File → Preferences
4. In Finder, navigate to the Sketchbook location show in in Arduino's Preferences
5. Move the D1miniExamples directory to Sketchbook location
6. The path will look like Sketchbookdirectory/D1mini_Examples
7. Restart the Arduino IDE
8. All examples are under File→Sketchbook→D1miniExamples

Hello World

1. Open File→Sketchbook→D1miniExamples→01.Basics→HelloWorld
2. Click Upload
3. After upload, open Tools→Serial Monitor, set baudrate to 9600 baud

Digital I/O

If you've gotten to this point, good work! Now we're going to learn a bit more about the WeMos D1's I/O ports. They're f***ed.

The fact that I have a knockoff board doesn't help either. Anyways, enough complaining. Basically, the labels on the WeMos D1 are not the same as those used in Arduino programs.

As an example, if I want to use digital port 3 (D3) as an output, this is the code I would use:

void setup() {  
  pinMode(5, OUTPUT);
}

void loop() {  
  // Turn on for 1 second
  digitalWrite(5, HIGH);
  delay(1000);

  // Then off for 1 second
  digitalWrite(5, LOW);
  delay(1000);
}

I've created a couple of reference tables for your convenience.

Note: I can't guarantee the official WeMos D1 board mappings are correct, but they're based off this:
http://www.instructables.com/id/Programming-the-WeMos-Using-Arduino-SoftwareIDE/?ALLSTEPS

Troubleshooting

1. Restart the Arduino IDE
2. Try a different micro USB cable
3. In Finder, navigate to ~/Library (to get to Library, click on Go, then press control, and click on Library). Rename Arduino15 to Arduino15-backup.Download and install the latest version of the Arduino IDE (replace your current version)Open Arduino, re-install esp8266 in the Boards Manager.

If you have any other troubleshooting tips, send them my way.

Notes

A good amount of the content here is based on the official WeMos documentation ( http://www.wemos.cc/tutorial/getstartedin_arduino.html ). I've simply filled in many of the gaps preventing my board from functioning properly.

This is what an actual WeMos D1 board looks like:

This is what my knockoff WeMos D1 board looks like:

Resources

• http://www.wemos.cc/tutorial/getstartedin_arduino.html
• http://forum.wemos.cc/topic/102/wemos-d1-r2-not-see-usb-ports-on-mac/2
• http://www.instructables.com/id/Programming-the-WeMos-Using-Arduino-SoftwareIDE/?ALLSTEPS
• http://forum.wemos.cc/topic/102/wemos-d1-r2-not-see-usb-ports-on-mac/2

Final Words

Now you know how to set up your WeMos D1 board and use its ports. I'm going to leave out discussion on its WIFI capabilities because there's plenty of documentation on that already.

In the next article, I will discuss how to connect a stepper motor to the WeMos D1.

After spending a few thousand hours of my life in Minecraft, I knew it was time to move on in my final year of high school. I started sleeping enough (9 hours) that I could naturally wake up in time for school. Magically, my IBS went away, my sinuses cleared up, and of course, I stopped sleeping in class.

I'm not sure if it's increased mental awareness or increased physical sensitivity, but I've become a lot more sensitive to sleep deficiency. If I lose even a few hours of sleep and don't make it up, my IBS and sinus issues return. However, the biggest impact is in my mental state. When I'm tired, I become angry far easier and a lot less patient. I've noticed this behaviour in others as well.

One objection to sleeping 9 hours a day is that I'm missing out on life, but are you really living life if you're a zombie? When someone is tired, they're generally observing life rather than participating it. It's almost like they're living in third person. Experiences don't trigger the same emotions or form the same memories that you'll remember later in life. On top of this, you lose the self control to put down your electronics and you'll often end up sleeping even later in a positive (it's actually a pretty negative thing) feedback cycle.

All this sounds great, but that's not the full story. Once in a blue moon, there will be a night I stay up and experience intense emotions and inspiration. These times have lurched me into action more than any other time.

At some point in high school, I was obsessed with LED lights. I knew they were the future and wanted to take part in selling them. My friend and I schemed about the idea, but we never really kicked it into action. Then one night, I felt an intense urge to put make my idea a reality. I spent hours building a business plan and began making sales calls the next day.

I wasn't the best salesman so the business didn't really pan out, but I'm amazed at how my emotions that night suddenly kicked me into action.

It's hard to say whether staying up later resulted in these heightened emotions or whether my racing brain kept me up later, but it shows that it doesn't always make sense to maintain a strict sleep schedule. This can be likened to the tales of programmers working late into the night producing their best work. As a software engineer myself, I can attest to having a few of these sessions in the past. Whether I produced quality work is unclear.

As long as it doesn't become a pattern, it may not be a bad idea to stay up late every so often. Who knows what inspiration you'll get. Just be sure to make up the sleep.

Before wrapping up, let's quickly talk about how much sleep you should get. I found that simply letting your body wake up naturally is the best way to figure out how much sleep you need. I found myself waking up after very close to 9 hours of sleep every night. There are two separate sleep concepts you should be aware of: sleep debt and sleep cycles.

Sleep debt accumulates when you get less sleep than your body requires (9 hours for me). You should attempt to make up this lost sleep by sleeping longer one day within two weeks. Your body should naturally want to sleep the extra time. From what I've read, after two weeks, you're no longer able to make up the lost sleep and your IQ will be permanently decreased.

Have you ever been woken up in the middle of an incredible dream? I have been many times. It feels bad when you're experiencing bliss one moment then wake up and realize you're back in real life. Sleep cycles correspond to the different phases your brain undergoes during sleep. Interrupting these sleep cycles can lead to grogginess when you wake up. They generally occur in about 90 minute intervals meaning you should sleep in multiples of this (7.5, 9 hours, etc.).

There's always those times when you just can't seem to fall asleep. Resist the urge to grab your phone and start Redditing or messaging people (I fail at this sometimes). Instead, use that time to question all the decisions you've made resulting in your sleepless night. In my experience, there's a few things you can do to increase your chances of falling asleep when you want to.

• Install f.lux or enable night mode (if you're on an Apple device). I've had people complain that it makes them sleepy. That's exactly what it's supposed to do.
• If you feel sleepy, you've missed your chance to fall asleep for about another half hour.
• Try not to do any intense physical activity within two hours of going to bed
• Try not to talk (vocally) within an hour of going to bed
• Sleep in a dark and cool room

I haven't cited any studies because I wanted to add my personal anecdotes to the conversation about sleep. This is my story of how I recovered from persistent sleep deprivation. Hopefully it inspires you to fix your own sleep so that you can live a more fulfilling life.

I just spent way too long writing this at work and should probably go home and sleep now. I think it's worth sacrificing a bit of sleep when I have the inspiration to write though.

Hmm, or maybe I should pick Minecraft back up.

I like doing things the JavaScript way; it just makes life so much easier for my team and I. If you're having to hack around some weird issue in JavaScript, someone has probably already solved the issue, but their solution has gotten lost in the vast JavaScript ecosystem. That is unless you're doing some insane next level stuff. Why write your own left padding function when you can just use left-pad? Why bother writing a backend for some generic CRUD dashboard if you can just use Parse?

Anyways, I digress. Up until a couple months ago, I had the illusion that Redux was the only mainstream state management plugin for React. Then my team told me about MobX. Instead of the fancy action/reducer pattern Redux uses, MobX simply makes your data observable. Your app will react anytime your data is mutated.

Motivation

In order to motivate the rest of this article, let me provide examples for both MobX and Redux.

import { createStore, dispatch } from 'redux';

// Command
const ADD_TODO = 'ADD_TODO';

// Action Creator
function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}

// Reducer
function rootReducer(state = { text: '' }, action) {
    return {
        ...state,
        text: action.text,
    };
}

// Store
const store = createStore(rootReducer);

// Every time the state changes, log it
const unsubscribe = store.subscribe(() => console.log(store.getState()));

// Output: { text: 'dubemon' }
dispatch(addTodo('dubemon'));

unsubscribe();

import { observable, autorun } from 'mobx';

class Store {
    @observable text = '';
}

const store = new Store();

// Every time the state changes, log it
const disposer = autorun(() => console.log(store));

// Output: { text: 'dubemon' };
store.text = 'dubemon';

disposer();

Wow, MobX has way less boilerplate. Case closed. Thanks for reading!

That was my first thought when I saw MobX, but I wouldn't be writing this article if that were the case. Unlike Redux, MobX is completely unopinionated and simply makes your data observable. It's up to you to structure your data, which can lead to maintainability issues if you're inexperienced.

The biggest concept to keep in mind is MobX pairs well with object oriented programming (OOP).

The one thing MobX and Redux encourage is keeping most of your application's state in a single store. Having a single store allows you to save your application's state in snapshots. Snapshots make time travel debugging possible where you can see how the application's state changed over time. You can also persist snapshots so that a user's session can be reloaded even if they leave the page.

Data Modelling

Let's look at an example of a Store containing a collections of Todo objects. First we define our OOP data models: Todo. Then, we create our Store state, which is a collection of Todo objects.

class Todo {
	@observable text = '';
}

class Store {
	@observable todos = [];
}

Rather than allowing users to directly modify Todo's internal text property, we should instead provide a setText method in case we ever want to add validation or transformation logic. setText is decorated with action to make it clear that it mutates the state, but this is only cosmetic.

class Todo {
	@observable text = '';

	@action
	setText() {
		this.text = text;
	}
}

Data Collections

Managing collections in MobX becomes tricky. If you replace the Todos array with a new array, observers watching for changes to todos will be stuck watching the old array and won't pick up on changes to the new array.  The following snippet is a contrived example of how to modify the Store's collection without breaking its observers.

class Store {
	@observable todos = [];

	// BAD: todos is re-assigned
	addTodo(todo) {
		this.todos = [...this.todos, todo];
	}

	// GOOD: todos is mutated in place
	addTodo(todo) {
		this.todos.push([]);
	}

	// BAD: todos is re-assigned
	removeTodo(index) {
		this.todos = [...this.todos.slice(0, index), ...this.todos.slice(index + 1)];
	}

	// GOOD: todos is mutated in place
	removeTodo(index) {
		// Modify the array with
		this.todos.splice(index, 1);
	}
}

Let's say we want to keep track of the Todo we're currently editing. We can add a property for the current Todo and its index in the Todos array.

@observable currentTodoIndex = 0;
@observable currentTodo = null;

setCurrentTodo(index) {
	this.currentTodo = this.todos[index];

	// It's likely we'll also need to access the index at some point
	this.currentTodoIndex = index;
}

getCurrentTodo() {
	return this.currentTodo;
}

getCurrentTodoIndex() {
	return this.currentTodoIndex;
}

The downside of this approach is now we're storing two additional pieces of state that more or less describe the same object. An alternative to this approach is to take advantage of MobX's computed properties and create a getter.

@observable currentTodoIndex = 0;

setCurrentTodo(index) {
	this.currentTodoIndex = index;
}

// Access this property using store.currentTodo 
@computed get currentTodo() {
	return this.todos[this.getCurrentTodoIndex()];
}

// Alternatively, we can just use a plain old function, 
// but this won't update observers
getCurrentTodo() {
	return this.todos[this.getCurrentTodoIndex()];
}

getCurrentTodoIndex() {
	return this.currentTodoIndex;
}

Asynchronous Actions

The examples we've gone through so far have been fairly straightfoward. However, at some point, you'll probably have to make HTTP or some other type of asynchronous requests. We're going to add mobx-utils to our project to help us in dealing with these async functions. Specifically, mobx-utils has a fromPromise function that wraps a promise that makes it easy to get its current state or observe changes to its state.

import React, { Component } from "react";
import { render } from "react-dom";
import { observer, Provider, inject } from "mobx-react";
import { observable, autorun } from "mobx";
import { fromPromise } from "mobx-utils";

class Store {
	@observable counter = null;

	getCounter() {
		// Get the current value of the counter promise
		// null if the promise is pending
		return this.counter.value;
	}

	fetchData() {
		// Pretend Promise.resolve is making an HTTP request
		this.counter = fromPromise(Promise.resolve(2));
	}

	fetchError() {
		// Pretend Promise.reject is a failed HTTP request
		this.counter = fromPromise(Promise.reject(3));
	}
}

// Allow our React component to observe our Store's state
@inject(({ store }) => ({ store }))
@observer
class Child extends Component {
	render() {
		const { store } = this.props;
		
		// We can display the promise's current state
		switch (store.counter.state) {
			case "pending":
			return <div>Loading...</div>;
			case "rejected":
			return <div>Ooops... {store.counter.value}</div>;
			case "fulfilled":
			return <div>Gotcha: {store.counter.value}</div>;
			default:
			return <div>Loading...</div>;
		}
	}
}

class App extends Component {
	store = new Store();

	componentDidMount() {
		// Child will show the pending then the fulfilled state
		this.store.fetchData();

		// Child will show the pending then the rejected state
		setTimeout(() => this.store.fetchError(), 1000);
	}

	render() {
		return (
			<Provider store={this.store}>
				<Child />
			</Provider>
		);
	}
}

render(<App />, document.getElementById("root"));

If you ever find yourself mutating the same property in an asynchronous function multiple times, use asynchronous flows to ensure your observers correctly receive the mutations.

Splitting Your Store

Now you know patterns for creating a store, setting and getting your observable properties, and dealing with asynchronous functions. You have bigger dreams than that though.

It's not unreasonable to think you'll have 50 observable collections in your store. However, keeping all of these in your root store is unreasonable. Instead, your root store can contain sub-stores. Generally your sub-stores should not rely on each other, but maybe you didn't fully plan things through like I did. If a store has to observe another store, don't do that in the constructor because the other store may not be initialized yet. Instead, create a setup function that will run after the constructor.

import { observable, autorun } from "mobx";

class RootStore {
	store1 = new Store1(this)
	store2 = new Store2(this)

	constructor() {
		this.store1.setup();
	}
}

class Store1 {
	@observable counter = 1;

	constructor(rootStore) {
		this.rootStore = rootStore;
		autorun(() => console.log(this.rootStore.store2.counter));
		// Uncaught exception since store2 is undefined
	}

	setup() {
		autorun(() => console.log(this.rootStore.store2.counter));
		// Output: 2 \n 3
	}
}

class Store2 {
	@observable counter = 2;

	constructor(rootStore) {
		this.rootStore = rootStore;
	}
}

const store = new RootStore();
store.store2.counter = 3;

Pitfalls

I wish I was a masterful enough writer to weave in the following pitfalls into the rest of the article. One day I'll get there. In the meantime, enjoy the fruits of my painful debugging labour.

If you define a function, which mutates state as an @action, any mutations inside that function will not trigger observers until the entire action is completed.

import { observable, action, autorun } from "mobx";

class Store {
  @observable counter = 1;

  @action actionCount() {
    this.counter = 0;
    this.counter = 1;
  }

  count() {
    this.counter = 0;
    this.counter = 1;
  }
}

const store = new Store();
autorun(() => console.log(store.counter));
// Output: 1
store.actionCount();
// Output: 1
store.count();
// Output: 0 1

It is possible to nest non-primitive data types and observe the inner types, but there are some pitfalls. You can nest non-observable types, because they will automatically be observed once added to their parent, but keep in mind that they will not be observable before then.

import { observable, autorun } from "mobx";

class Store {
    @observable map = new Map();

    // Not an @action since we want to watch changes as they happen
    actionCount() {
        const arr = [];
        // Triggers autorun on line 17 and adds an observer
        this.map.set('key', arr);
        arr.push(1);
        
		// No output
        this.map.get('key').push(2);
        
		// Output: { ..., added: [2] }
	}
}

const store = new Store();
autorun(() => store.map.get('key') &&
	store.map.get('key').observe(console.log)
);
store.actionCount();

I hope you learned something about MobX today. I've only been using it personally for two months and am sure there's better patterns than what I've described here. I learned a lot from experimenting in CodeSandbox and by reading all the other great (but often outdated or not idiomatic) resources on awesome-mobx.

Click here if you want to see a simple React MobX project I built that implements some of these principles.

About a year ago, I was shocked to learn some companies still use a manual verification process despite the competitive market of automated providers: Onfido, Acuant, Mitek, Jumio, etc. These findings led me to naively assume I could create my own automated provider using off the shelf deep learning libraries. Of course, things are never that easy. The rest of this post documents what I've learned about this industry and where I see it going in the future.

Any organization with an online presence that deals with real people's identities and/or money should have an identity verification to reduce fraud, and comply with anti-money laundering (AML) and know-your-customer (KYC) regulations.

Under US regulation; 31 C.F.R. § 103.121 implementing PATRIOT Act Section 326

• A bank must obtain, at a minimum, the following information from the customer prior to opening an account:
  1. Name
  2. Date of birth, for an individual
  3. Address
  4. Identification number (for a U.S. person, an SSN)

Market research was mostly directed towards the Canadian market where I talked to a number of financial organizations. There are separate processes for verifying the identities of individuals, corporations, and other entities to comply with the Proceeds of Crime (Money Laundering) and Terrorist Financing Act (PCMLTFA).

For individuals, there are three methods of verification. The first two are single process where the individual must provide a government issued photo identification document in person or where you retrieve the credit file (must have 3 years of history) for the individual. The third method is a dual process where individuals must submit two different documents such as an utility bill, credit card statement, or Canadian birth certificate.

Requiring an individual to be physically present defeats the entire purpose of automated online verification. Credit file lookup solely relies upon an individual providing their name, date of birth, and address. The dual process method requires the most work on the individual's part since they must retrieve multiple documents, but also provides the greatest assurance the individual's identity is not stolen.

Corporations and other entities must provide documents confirming their existence such as the corporation’s certificate of corporate status or a partnership agreement.

In essence, at least for the Canadian market, asking users to submit photos of their photo identification documents doesn't provide compliance with Canadian regulations. However, there is still value in this type of verification. Organizations that provide goods or services with monetary value for their need to combat fraud on their platforms. For example, AirBnB needs to ensure its users aren't going to trash their rentals. Roboadvisors simply manage their users' money and don't need to have the same level of fraud protection.

Honestly, the market research part of starting a business is so painful, but it's well worth it. I learned there are two reasons for performing identity verification: KYC and AML compliance, and fraud protection. Within these, credit checks and other types of documents are commonly used for providing an additional layer of verification. It's also possible corporate and entity verification are an underserved market (pending more research).

Technical Stuff

Let's put on our engineer hat now and  imagine what we would need to provide an identity verification solution that provides regulation compliance and fraud protection for both individuals and corporations.

We need to build an application that requires some or all of the following user input:

• Provide their name, date of birth, and address
• Upload a photo of their photo identification document
• Upload a photo of their face
• Upload a photo of a textual document such as a utility bill or credit card statement

After performing some kind of trendy, state of the art deep learning, the application will perform some or all of the following actions:

• Determine if the photo identification document is legitimate by comparing it to the photo of the user's face
• Retrieve the user's credit file
• Ensure the user's credit file, photo identification document, textual documents, and provided name, data of birth, and address all match
• Search the user's information in databases

The exact set of inputs and outputs will change depending on the customer's requirements and whether the user is an individual, or representing a corporation or entity.

The core of the engineering problem is in validating and extracting information from the photo identification or text documents. Validation involves determining whether the document and the uploaded photo of the document are legitimate or not. Extracting information generally involves extracting text using optical character recognition (OCR).

Let's focus on photo identification documents for now. Fake driver's licenses are commonly used for sneaking into bars and have reached a point where they’re quite convincing upon visual inspection. The barcodes in driver's licenses encode information that can be compared to the text on the front of the license. Depending on the quality of a fake document, its barcode and text may have mismatched content. OCR can be used to extract text while a barcode decoder could be used to decode PDF 417 barcodes (common in photo identification documents). If the barcode and text match; the license's information (especially the license number) should be looked up in a database.

We also need to ensure photos of photo identification documents have not been manipulated. Metadata (such as EXIF metadata found in JPEG photos), can include information about the means by which a photo was taken. For example, I once came across a document photo where the metadata contained “Photoshop”. That's an amateur mistake, though. Metadata can be edited to hide signs of manipulation and more advanced techniques need to be used: error-level analysis, luminance gradient, average distance, HSV and Lab colorspace histograms, JPEG resave quality estimate, extract JPEG quantization tables, and copy-move detection. As it stands now, these techniques require manual analysis, but I believe it's possible to automate these with [the almighty] deep learning.

The techniques described so far only account for text and barcodes. They could easily fall prey to a piece of paper with text on it. Of course, the solution is always deep learning. We could use image classification to label the document (e.g. Ontario's driver's license). Users can still spoof this if they have a fake driver's license, but that's where database lookup comes in.

A photo of a document is insufficient to determine if that document has been stolen. This is where ID selfies come in; in addition to a photo of their document, users must also take a photo of themselves holding their document. Facial recognition could then be used to compare the user’s face with the face on their document. Unfortunately, from a usability perspective, ID selfies create more friction since users have to provide three photos instead of two (front, back, selfie). The selfie's resolution would be too low for extracting the front of the document's data.

What happens if a user holds up a piece of paper with a face on it or is wearing a mask? We can user a technique called liveness analysis, which basically requires users to take a video ID selfie. In this video, they are asked to make facial gestures or say something. Once again, deep learning can be used to ensure the face belongs to a living human and that they are not wearing a mask.

If you think we’re done, think again. Check out this very convincing deepfake of Obama.

A user could use a deepfake video in lieu of their actual face. For those that don’t know, deepfakes are a relatively recent invention where deep learning generative adverisal networks (GAN) are used to apply facial gestures from one person's face to another person’s face. Detecting deepfakes is an active area of research and the only techniques I’ve seen are monitoring eyebrow movements and warping of the face.

The scariest part about deepfakes is the fact that any methods for detecting their inauthenticity can be used to improve the underlying deep learning models.

In summary, a number of techniques can be employed to detect lost, stolen, or fake documents, but these are not foolproof, especially with the advent of deepfakes. The techniques discussed were analyzing metadata, error-level analysis, OCR, barcode detection, image classification, and liveness analysis. These techniques require users be able to submit photos of the front and back of their documents, ID selfies, and video ID selfies.

I did not dive into deep learning specifics because I am not an expert at deep learning. I understand the basics, but I have no clue why how to design my own networks. How do you choose between 34 or 100 layers other than guess and test?

Closing Thoughts

I’ve had a lot of conversations with product managers, compliance officers, and executives at financial tech companies in the past few months. Existing automated photo document verification appear to be serving the market sufficiently. There is greater demand for complete anti-fraud solutions because a lot of these companies are building their own fraud decision systems that combine signals from a number of user verification techniques including document verification, credit checks, and database lookups. There are a number of companies entering the complete solution space, but their decision-making processes are not always transparent nor accurate.

One of the largest cryptocurrency exchanges, Coinbase, received bad press for facilitating actors performing money laundering. In the fourth quarter of 2017, cryptocurrency exchanges saw 10 times increase in verifications for clients. This surge has overwhelmed exchanges and forced some to stop accepting new customers due to slow, manual verification processes. If Coinbase had been using a [hypothetical] complete anti-fraud solution, they wouldn't have run into these bottlenecks.

I hope you enjoyed this brief overview on the identity verification space. If anything here piqued your interested or if I made any mistakes, please reach out to me on LinkedIn!

Disclaimer: This blog does not provide legal advice and does not create an attorney-client relationship. If you need legal advice, please contact an attorney directly.

It all started at the University of Toronto science camp. Along with my brother and cousin, we scavenged any and all the gizmos we could find from syringes to batteries to motors to light emitting diodes (LEDs). We didn't really accomplish much with this loot other than illuminating the LEDs and making the motors spin really fast by connecting the batteries in series. Over the years, I had similar encounters with simple electronics that kept growing my interest.

In grade 10, I'm not sure what, but something gave me an urge to start an LED business. LED bulbs were just beginning to gain traction. Their upfront cost was significantly higher than that of incandescent or fluorescent bulbs, but their reduced operating costs could pay off in as little as a year. I thought this would be my chance to make it big.

The first step I took was purchasing $300 worth of LED bulb samples after a few awkward Skype calls with Chinese manufacturers from Alibaba. I did my best to learn how to not get scammed when dealing with distant manufacturers. I received all of my samples in about a month. I knew nothing about shipping goods and was hit with an unwelcome surprise when I was charged for duties and taxes. Since then I've learned you're supposed to tell the manufacturer to write down the value of the goods much lower than they actually are. When I was setting up a merchant account with DHL for shipping my bulbs to customers, they asked what kind of volume I thought I'd be doing. My answer was $10,000/month. You have to be ambitious if you want to make it big.

I wanted to be selling quality products so I had to do quality testing on my LED bulbs. I was a high school student. I didn't have money for fancy equipment like thermal shock test chambers for testing the lights. Instead, I just gave my parents' house a free makeover with one condition - the lights always had to be on.

For a long while, I distracted myself with purchasing and testing the quality of my Alibaba samples. Not much energy was put into figuring out how to actually sell the bulbs.

I took a hiatus to play Minecraft until grade 12 when I finally broke my addiction. This time around, I had confidence in my purchasing skills and knew I had to focus on actually selling the bulbs. I set up a Wordpress shop website and spent a bunch of time taking photos of samples and writing copy. Once again, I distracted myself with things that didn't matter. I purchased even more bulb samples, but never actually came around to marketing. However, I did manage to sell a few bulbs to one of my teachers.

I was doubting whether I'd be able to sell any bulbs before I'd even tried. Ikea had just announced it would only sell LED fixtures and bulbs by 2016. I pondered on how I could provide more value to the LED industry instead of just being a middleman. Eventually, I came up with a pretty bright idea (sorry).

LED bulbs are composed of three primary parts:

• Housing (acts as a heatsink)
• LED array (contains one or more LEDs)
• Driver (a circuit that regulates power to the LED array)

I found that the driver is generally the limiting factor in the lifespan of bulbs and contributes a significant portion to their cost. Due to their cost, manufacturers use cheaper components in the drivers (especially cheap capacitors), resulting in even lower lifespans.

My idea was to separate the driver from the rest of the bulb. This way, multiple bulbs could share a single, high-quality driver that could easily be replaced if it ever broke. My electrical knowledge was too limited at this point to know if this driverless LED bulb idea was actually viable.

Fast forwarding to my first year in university, I had a teaching assistant, John, who was the only reason I passed my physics course. John was an electrical engineer pursuing a quantum computing Ph.D. I pitched my driverless LED bulb idea to him. He said the idea was viable and became my “co-founder”.

To fund development, we decided to resell normal LED bulbs as middlemen in the short term. This time I create a landing page, product catalog, and brochure.

We began to cold call local small business owners. Out of 67 calls, I landed 0 meetings and John landed 1 meeting. He gave the business some samples and never heard back afterward. One of my calls was with the international construction project manager at Costco. I couldn’t explain why our bulbs were better than any of the other LED bulbs on the market. Our sales pitch and material lacked a solid value proposition. My pitch delivery was also terrible and I probably came off as a typical telemarketer. We also sent a "proposal" to the Toronto Transit Commission:

Hello TTC,

We are Beta Lighting, an LED lighting solutions company. We have operated in Ontario for several years focusing on lighting solutions for local organizations. We sell a wide variety of LED lights including bulbs and tubes and design solutions to retrofit existing CFL technology with LED technology.

As passengers of the TTC subways and buses, we noticed the infrastructure uses CFL lighting. We believe we can work with the TTC to retrofit its infrastructure with energy-efficient and environmentally-friendly LED lighting. The costs can be recouped in 2 years and after that, it’s all savings.

What do we, Beta Lighting, need to do to help the TTC make the move to LED lighting?

Eventually, we lost momentum as we got caught up in other things in life. Since then, LED bulbs have gone on to absolutely dominate the lighting market.

That's the story. Now let's talk about what I learned and where the LED market is at now.

Lessons Learned

Honestly, the biggest mistake I made was not committing to the idea. When I first had the idea in grade 10 (2010), I was ahead of the curve. Each time I took a hiatus, my chances worsened. At some point, I toyed with the idea of using Fulfillment by Amazon, but I'm not sure why I didn't actually commit. Instead, I focused on cold call tactics, which aren't great for a low margin, low price product like LED bulbs. Even Facebook ads were cheap at the time. One of the biggest struggles I have when starting a business is spending money where it counts. I'm a frugal person in general and find it hard to spend any money even when there's the possibility of a payoff.

The State of the LED Market

I haven't extensively researched current LED bulbs, but I believe their cost has decreased because they have cheaper drivers and superior heat management (allowing their housing to be smaller). The first LED bulb samples I purchased had a heavy metal heatsink as its housing. Now, the housings are just cheap plastic.

Interestingly, the Amazon Basics LED bulbs are only rated for a 15,000hour lifespan when the LED bulbs I bought were rated for 50,000hours. Light emitting diodes don't burn out like incandescent bulbs. Instead, they slowly dim as they get older. I've seen claims that some diodes will retain 80% of their original brightness after 100,000hours or 11.5 years of continuous use. Clearly, the driver is the limiting factor here.

The brightness or amount of light emitted by a source is measured in lumens, a unit of luminous flux. The 40watt incandescent equivalent Amazon Basics LED bulbs require 6.5watts to output 450lm. The bulbs I purchased required 5watts to output 400-450lm.

Of course I never actually tested my LED bulbs' full lifespan, luminous flux, or power requirements since I didn't have the right equipment. However, from the numbers, it looks like they were superior in every way except price, coming in at $3.02/bulb from the manufacturer compared to $2.33/bulb from Amazon (who is a middleman and adds to the cost).

I didn't mean for this to become a post about Amazon Basics bulbs, but there is something weird happening there. If I go back to Alibaba, the LED bulbs have specifications more similar to my original bulbs, but cost a third of the price. It's not unthinkable that Alibaba manufacturers would overstate their bulbs' actual specifications.

LED bulbs have given rise to new types of lighting fixtures where the LEDs are integrated directly into them. When the LED dies, the fixture dies. For the average consumer, this is fine as the LEDs could last upwards of a decade with light use.

Let's revisit the driverless LED bulb idea. It already existed at the time I thought of it, but was still an emerging technology. AC drivers function exactly like I envisioned. Multiple LED bulbs could be connected to a single AC driver as long as they match its voltage and current specifications (depends on if the bulb wiring is series and/or parallel).

Every time I think about my timing in the LED bulb market, I give myself an undeserved pat on the back. I was ahead of the curve, but failed to execute my vision.

If you're interested, you can check out the landing page and brochure I made for Betta Lux. Hit me up if you want a lights.

Understanding Your Customers

When you got a fine dining restaurant, you're not going for just the food. You're going for the service, ambiance, and novel ideas. The plates you're eating from were probably made from a local potter. The servers will notice every single action you make and appear at just the right times. Your food will come out at just the right time. These restaurants perform an immense number of activities to create exceptional customer experiences.

This is similar to how engineers must focus on creating great user experiences. It's not so much about what you build as it is what you contribute. If you're building a library to share with other engineers, you need documentation and tooling. If you're building a new messaging app, you need to create a user interface anyone can understand and use. In the first example, the target customer is other engineers, and in the second, the target customer is end users.

Although it's entirely possible to build something and hope customers will come, your chances will be a lot better if you think about the problem you're trying to solve before creating anything. You might see Michelin starred chefs simply cooking from their heart, but bear in mind all the chefs who did the same thing and didn't make it (I've met a lot of them). Maybe you're opening a new bubble tea shop because there's a certain part of the city with a high number of young Chinese people who are underserved in terms of bubble tea. Unlike software problems, food problems are generally not major pain points but are luxuries.

Let's look at another example. Near Niagara Falls, a popular tourist destination, a restaurant on a busy road went out of business. An enterprising couple had been keeping their eyes on the Niagara Falls restaurant market for two years. When they saw this particular restaurant close, they sensed their opportunity and purchased the place. They turned the restaurant into a family-oriented place. Their plan was a complete success and within another two years, they sold the restaurant for a healthy profit. This couple understood the market and knew there were lots of young families passing by to visit Niagara Falls. These families were looking for a quick kid-friendly bite after a long drive. I didn't go into detail here because the important part is that this couple spent two years understanding their customers and jumped on the opportunity they found.

Understanding your basic customer demographics (age, sex, income, race, location, etc.) goes a long way when starting any business. However, you're just hypothesizing your solution. Software engineers can use the agile methodology to test their hypotheses to minimize false positives. Applying this methodology to food can mean testing products at a farmer's market or searching for areas elsewhere in the world with similar demographics and looking at what restaurants exist there. If demand is limited, then perhaps you're not addressing a real problem or you need to work on your solution. You need your target market to love your product because acquiring new customers is a lot harder than keeping existing customers. This is especially important in the food world, which is a physical process, unlike most software. If people like your food, they're going to bring their friends and family.

Solving Your Customer's Needs

Once you've found your target market, you need to come up with a solution to address their [food-related] problems. This goes beyond just coming up with a dish. You need to create an entire experience (not necessarily a fine dining experience).

When someone first begins software development, they'll often solve a problem by patching together pieces of code other people wrote into something that works, but doesn't account for customer experience. It will probably be difficult for future developers to maintain and will be bug-ridden. As a software engineer refines their craft, they'll work with their customers to create an optimal experience that precisely solves the problem without wasted work and uses fundamental techniques.

When someone first begins cooking, they'll often follow a recipe they've chosen based off what they're craving at the moment. The recipe probably tastes great, but there's no way it can account for every type of person that will every cook it. In short, it's a suboptimal solution. As the cook refines their craft, they'll understand their customers and use fundamental techniques to create an optimal experience that precisely solves the problem.

Identifying a problem is a difficult task. Creating an [almost] optimal solution is even harder. How do you come up with any solution? The key is knowing fundamentals and being able to extract relevant patterns from them. This is what we call abstraction in the software world (maybe in other worlds too). In terms of cooking, the fundamentals are often basic techniques like knife skills, braising, boiling, steaming, grilling, etc. However, the definition of fundamentals changes based on your skill as a chef. The local food movement extends fundamentals to understanding where ingredients come from. The modernist movement extends fundamentals to understanding the chemistry behind core techniques.

Unless you're a creative genius, you'll need a starting point, perhaps an existing dish, that solves the problem to some extent. Then you break that starting point down and question whether each component meets your customers' needs. I'll make this more concrete with an example in a second.

Solving Fictional People's Needs

A little while back, a friend showed me an anime about food called Shokugeki. I'm not one for anime, but this particular one blew me away with its culinary insights amidst extravagant "foodgasms". Despite being fictional, I believe the scenarios it presents are accurate.

In one of these scenarios (season 1, episode 16), the main character and his father were having a themed cook-off. The theme was to present a dish for people who had just woken up and needed something to prepare them for their day. In this situation, the chefs were given a problem and had to find a solution. The main character used risotto (typically quite rich) as a starting point. He recognized the need for a dish that's light and nutritious.  He substituted stock for apple juice and topped the risotto with apples for lightness and bacon for nutrition.

His father used ramen (also typically quite rich) as a starting point but made a few modifications. He infused the noodles with yuzu citrus to make them more refreshing. The stock was rich, but light since it was made from kombu, shiitake mushrooms, and grated taro instead of the classic pork, kombu, and bonito stock. He recognized that soups do a great job of warming the body (great if you're just waking up) and further emphasized this effect by adding chili, ginger, and garlic. To finish the dish off, he prepared toppings like onion, carrot, and tempeh (similar to tofu) with techniques suited to each topping.

The father won by a landslide because he better addressed the problem. The combination of all the different components of his dish created something that doesn't overwhelm someone who's just woken up but instead provides them with the energy needed to start their day. Although the main character's dish addressed the problem, it didn't provide the same satisfying energy. The father was able to draw on a far richer set of fundamentals and create a much different dish than ramen while the main character only tweaked a couple aspects of risotto.

When you're coming up with a dish, you're drawing on all of the techniques and knowledge you've acquired in the past, and composing it together.

Solving My Parent's [Food] Needs

Let's go through another example to make things more concrete. This one comes from my own cooking. I've had the opportunity of traveling to a lot of different places and experiencing different cuisines in my life. If you were to ask me what my favorite cuisine was, I wouldn't be able to tell you. Anyways, I was home for the holidays and had the chance to share my cooking with my family. This is going to be a little long so brace yourself.

One particular day, I was cooking dinner for just my parents. I accounted for a number of factors when formulating the dish:

• My parents are open to any cuisine just like I am
• It's winter and my parents were spending the day out in the cold so the dish should warm the body
• It had been a couple weeks since my dad last had rice and he was beginning to crave it
• In previous meals, I had been using "restaurant levels" of salt, but this was too much for my family, which preferred milder seasoning
• My mom prefers dishes low in fat

These factors are great to keep in mind when working on the dish, but I needed a starting point. I scoured the freezer and found beef cheeks, a tough cut with little fat and a lot of tendons that become "melt in your mouth" tender when slow cooked. I decided to use a classic French recipe for the beef cheeks where you slow cook it with stock, red wine, mirepoix (carrots, onion, and celery), and bouquet garni (thyme, parsley, peppercorn, bay leaf).

Braised beef cheeks are definitely hearty enough to warm the body, but aren't enough to be satisfying. After a bit more scouring, I found sweet potatoes and persimmons. I didn't really know what direction to take this dish in so I did a quick search online. I found a recipe for an Indian sweet potato paratha, a type of flakey flatbread.

A lightbulb went off in my head. This dish was beginning to resemble Mexican barbacoa (slow-cooked meat) tacos. However, I still needed to incorporate rice. American burritos seemed better suited to the task than tacos. Refried beans could be substituted for a sweet potato dhal (lentil stew). Rice could be spiced with garam masala (spice blend) and turmeric. I laced each element of these elements with a bit of ginger to intensify the warmth without overpowering the other flavors.

The dish was becoming quite heavy with the beef cheeks, sweet potato, and rice components. A sweet salsa would provide a refreshing lightness to the dish. I'd seen mango salsas in the past and thought persimmon could be substituted instead of mango. Sour cream could be used to mellow the pungent spices and provide a thermal contrast (since it's cold).

By this point, I'd met all my requirements and come up with a unique dish that my parents loved. This kind of recipe analysis is just the tip of the iceberg. A professional chef would spend far longer analyzing their customers' needs and determining the composition of their dish.

Don't Forget About the "Gram"

Gram means Instagram for the uninformed.

Like we've discussed, there's a lot more to cooking in the real world than being given a problem and coming up with a dish to address it. Don't forget about the rest of the customer experience. For example, if you're opening that bubble tea shop for young Chinese people, make sure the drinks are photogenic and the lighting is good.

In a restaurant, your target customers are not only the diners but also your waiters and line cooks. If you create a dish that's too complicated, the line cooks will be in for a bad day. In software, I see engineers forgetting their customers are also the other engineers working with them. Don't forget this.

Putting it Together

Let's recap what we learned today. I know you want to just dive into cooking, but you need to spend time understanding your customers' needs. From there, you can begin formulating an experience to meet those needs. That involves composing dishes, ensuring your support staff can operate properly, and creating a suitable atmosphere. There's a lot of moving parts and I'm still figuring out how to account for all of them. It might just come with experience.

There's so much more I want to talk about, but that will have to wait for another time. You may not agree with everything I've said here, but this is where I'm at with cooking and software engineering at this point in time. I'm certain I'll refine my approaches in the future, but hopefully, it gives you a good starting point to hone your own culinary skills.

I was clapping my friend, Adrian’s blog post earlier today when I found out Medium limits you to 50 claps. My friend deserved far more praise than that, at least 51 claps.

Behind me were Adrian and Blake. Adrian asked, what if we modify the HTTP request. Brilliant! Right there and then, we knew we were onto something.

We analyzed the HTTP requests being sent when we clapped. It looked like Medium was sending changes to the number of claps rather than absolute values.

The first step was simply trying to send our own request. With the three of us giggling away, I fired up Postman and copied the request body in. “xsrf token missing”, we completely forgot about all the request headers. It’d be too much effort to company them from Safari to Postman manually.

Real engineers use Chrome, which has this handy little feature that generates a JavaScript fetch function (sends an HTTP request) based off a past HTTP request. After clapping once, we generated our fetch function and executed that. It worked!

At this point, Blake and Adrian started working through edge cases. What would happen if we sent more than 50 claps or negative numbers? Could we cause a value to overflow if we sent a really big number? How about alphabetical characters? Medium’s defenses seemed impenetrable.

Then we tried non-integers. At first, it seemed like nothing was happening and we nearly gave up. But as we kept throwing every number we could possibly think of at their API, something strange happened. After sending 0.2 and refreshing the page, my clap counter actually showed 10.2. It worked!

We hadn’t noticed it, but somewhere along the way, Adrian’s blog post went from 136 claps to 102. I had somehow given him negative claps. I began frantically trying to re-create the steps I had done. After a solid 20 minutes of trying every possible combination of numbers, we cracked the secret (which is a secret).

With the secret in our hands, I whipped out a simple script to repeat these steps over and over. We didn’t want to raise any alarms over at Medium so we added delays between subsequent loops.

Here’s to the next 12 hours of infinite claps before Medium shuts this party down!

How are there so many poorly designed sinks that spray water around or are too short to put my hands under?

Why are houses so monotonous in Toronto?

Is the key to success truly just persistence and doing what other people won’t?

These thoughts appeared so often that I began to recognize patterns in my creative process.

It all starts with an infantile thought like, “Why am I still using Microsoft Word in 2019?”

Then the thought may go dormant for a while... Or it may not come back.

I try to scribble them down before they disappear into the void. This is useful for breathing life back into deceased thoughts.

Each time a thought resurfaces, it matures a little more, “What happened to the all-so-popular Evernote that was supposed to change the way we write forever?”

At a certain point, I’ll have developed enough interesting questions or observations to write something more concrete like a blog post or business plan. Just like I’m doing now.

If I can’t answer a question myself or the thought extends beyond my personal life, I take a look at what other people are saying about the topic. When I was researching writing apps, I came across these two interesting pages:

• Hacker News: Designing a Personal Knowledgebase
• Communicating with Slip Boxes

I’ll make my own notes about what people say. Eventually, I’ll have outlined all the information I need. The last step is to weave it together into a compelling piece, and of course, draw some pictures.

Back in high school, I was hungry for business ideas. I didn't understand how people could just come up with them out of thin air.

Now I understand. When your mind isn't distracted by your phone or the bustle of everyday life, it has extra capacity.

Your mind has space to observe. It can connect the dots between past memories. It's as easy as that.

So do yourself a favour. Do nothing.

There are infinite food pairings around the world. It’s all a twisted mess of relationships like a ball of cotton candy.

When you think about it… You can draw relationships between just about anything.

Addition is the opposite of subtraction.
Programming is like writing, but for nerds.
Having your heart broken is like… Well, there’s nothing quite like this one.

Everything on this planet is related in some way. Everything you know, think, and feel is encompassed in your personal knowledge graph, a small piece of the world’s graph.

Understanding the information graph is extremely helpful for learning new things and discovering opportunities. Before diving in, we need to do our "mise en place” (prepare our ingredients before cooking). Let’s review what a graph is.

Not the pie or bar kind, but the software kind. Let’s go back to our food pairings. Bread, butter, hot dogs, and ketchup are called nodes. The pairings between them are called edges. Nodes are bits and pieces of information while edges are the relationships that connect the information together.

When Christopher Columbus discovered North America, he connected  Europe to the Americas. He brought treasures like chocolate and corn back to Europe.

Elon Musk used his position on the forefront of battery technology to bring the electric car to the masses.

Did you know everyone on Earth is connected to everyone else by at most six other people?

Breakthrough scientific discoveries uncover new nodes and expand the world’s graph. More nodes create more opportunities for edges.

When someone’s personal knowledge graph has an edge or node no one else has, they might have an advantage. This is known as information asymmetry.

If every node with edges to every other node, the world would be a whole lot more efficient and really, really boring. There would be no point in visiting new countries or meeting new people because you already know everything about them.

Lucky for us, not all knowledge is readily available. Despite everything being connected in a single graph, it’s locked away by space and time. Even though you’ve likely had chocolate and avocados before, you’ve probably never had them on the same plate or in succession so that they mix in your mouth.

Information is organized by space and time.

The closer pieces of information (nodes) are in physical or mental space, the easier they are to recall. When you remember one node, the other nodes nearby are also easy to remember.

When you think of baguettes, you may also think about croissants or the Eiffel Tower because they’re all closely related to Paris or France.

Pieces of information (nodes) that occur successively or repeatedly will also be easy to remember.

When I memorize new recipes or techniques,  I often practice them once, then the next day, then the next month, then a few months later. This is known as repetition learning. The less a piece of information is used, the further into obscurity it will go. Edges disappear.

It’s become easier than ever to find related information in space and time. Google is a way to find information across the world. It connects your personal knowledge graph to the world’s knowledge graph. In the future, Elon Musk’s Neuralink will connect your brain directly to the world’s knowledge graph. For now, personal connections are the best way to uncover valuable information few people have.

Google and Neuralink help you find existing nodes and edges, which provide you with more opportunities to create edges. The important part is you need to create your own edges. To get ahead, you need to connect nodes of information together yourself.

Being bored and doing nothing is the best way to do so...