robcmills

OpenSpace Frontend Interview React Tooltip Challenge

In order to assess candidates technical competence, especially in React, we ask them to build a Tooltip component.

Challenge 1

Implement the simplest possible version of a Tooltip. Render a "target" div in the center of the screen and on hover show a "tooltip" div to the right of it.

robcmills

Engineering Principles

Know Why

• This person works without any interest in why the work is necessary or how it affects the user and system. If changes are requested they don’t have an informed opinion of whether it’s desirable. They’re not sure of how different entities on the network piece together.
• This person understands the central motivation behind a task, but isn’t aware of enough context to propose changes. They’re aware of the high level goal that this work ties into, but isn’t confident in how this feature advances those goals.
• This person is confident in the motivation behind a task and how it ties into higher level goals. They ask questions to tease out hidden assumptions and clarify parts of task that are hidden or not examined.
• This person is able to explain the motivation behind a task and how it ties into a high level goal. They see one step ahead and ask about how it could affect other parts of the product and offer potential solutions when problems exist. They work closely wit

robcmills

PM2

Overview

In production Heroku uses Procfile. pm2 roughly emulates this.

Trace npm start -> node pm2/start.js

Basically pm2/start.js is just a node script that uses pm2's node api to start processes according to the dynamically imported config.

robcmills

RFD

• https://paper.dropbox.com/doc/2017-09-23-RM-Email-Rendering-Refactor-SdUnhuROf4B2XK0dA8De8?_tk=share_copylink

Briefly look at how emails were pre-rendered previously

• React components pre-rendered into Hogan templates
• Example of ugly template syntax:
  • server/service/email/react/es6/templates/invitation-to-bid.js#L191
• Developer workflow consisted of many steps and 3 different scripts
  • babel transpiler script
  • render script

robcmills

// https://github.com/BuildingConnected/client/pull/1648
// apps/main/new-prequals/dashboard/vendor/modal/notes.js

const Notes = ({
	...props,
}) => (
	<div className={classes.root}>
		{/*...*/}
	</div>
)

robcmills

Catan Conquest

The objective of Catan Conquest is to grow your army, claim the most land, defeat your enemies, and conquer the island of Catan.

Overview of changes:

• resource production refactor (see Resources section below)
• settlements, cities, & armies are placed in the center of hexes instead of at the intersections

robcmills

Catan Castles & Armies

Unless noted here, Catan Castles & Armies follows all the rules of regular Catan

Overview of changes:

• buildings (settlements, cities, armies) are placed in the center of hexes instead of at the intersections
• no distance rule (except for initial placement)

robcmills

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

robcmills

// var htmlIn = '<div>Hello world!</div>';
// var htmlIn = '<div>Hello <b><i>world!</i></b></div>';
// var htmlIn = '<div><ol><li>Hello</li><li><b>world!</b></li></ol></div>';
// var htmlIn = '<div>1</div><div>2</div><div><br/></div><ol><li><b><i>Hello<i><b></li><li><b>world!</b></li></ol></div>';
var htmlIn = '<div>Hello </div><div><br/></div><div>world!</div>';

var trimTo = 8; // trim to this length


var trimHtml = function(html, trim) {

robcmills

// file input element gets media

// submission_media.hbs line:36
<form enctype="multipart/form-data" class='media-upload-form'>

// submission_media.js line:134
  fileDidChange: function() {
    //...
    this.setFile(file);