pcanterini

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

• They are the people who get things done. Effective Engineers produce results.

Adopt the Right Mindsets

pcanterini

Android

Facebook

Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/28.0.0.20.16;]

Twitter

Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36

pcanterini

#!/bin/bash
# Delete all containers
docker rm $(docker ps -a -q)
# Delete all images
docker rmi -f $(docker images -q)

pcanterini

{
    "updated_at": "2016-10-19T20:16:55Z",
    "type": "ts",
    "tracks": [{
        "url_hash": "fc88ab7623ceb58a7ee77a7ea2f077462ab39d725645881e02a4308566d52719",
        "url": "http://bleacherreport.com/articles/2670568-2016-17-nba-season-preview-predicting-who-will-be-this-years-breakout-star",
        "updated_at": "2016-10-19T15:42:01Z",
        "tag": {
            "unique_name": "nba",
            "tag_id": 19,

pcanterini

##Setup your server (this would ideally be done with automated provisioning)

• add a deploy user with password-less ssh see this gist
• install forever npm install -g forever

##Install flightplan

• npm install -g flightplan
• in your project folder npm install flightplan --save-dev
• create a flightplan.js file

pcanterini

// Prototypal OO with ES6

// Eric Elliott's example
let animal = {
  animalType: 'animal',
  
  describe () {
    return `An ${this.animalType}, with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }

pcanterini

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

pcanterini

import test from 'tape';

// For each unit test you write,
// answer these questions:
test('What component aspect are you testing?', assert => {
  const actual = 'What is the actual output?';
  const expected = 'What is the expected output?';

  assert.equal(actual, expected,
    'What should the feature do?');

pcanterini

#!/bin/bash
 
AUTH_EMAIL='your@email' # dnsimple account email address
AUTH_TOKEN='your-api-token' # dnsimple api token
DOMAIN_ID='yourdomain.com' # domain name or id
RECORD_ID='12345' # record id to update
IP="`curl http://icanhazip.com/`"

curl -H "X-DNSimple-Token: $AUTH_EMAIL:$AUTH_TOKEN" \
     -H "Accept: application/json" \

pcanterini

/* bling.js */

window.$ = document.querySelectorAll.bind(document)

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn)
}

NodeList.prototype.__proto__ = Array.prototype