Unbreakable: The Craft of Code

“Woz designed all the hardware and all the circuit boards
and all the software that went into the Apple II… not one
bug has ever been found … the circuit design of the
Apple II is widely considered to be astonishingly
beautiful, as close to perfection as one can get in
engineering.”
-- Vikram Chandra Geek Sublime

Unbreakable
Craftsmanship
Doing something good for its own sake

Woz Flow Chart:
Be A
Genius
Build Stuff

Woz Flow Chart:
Be A
Genius
Build Stuff
Learn
Learn
Learn
Learn
Learn
Learn
Learn
LearnLearn
Learn Learn
Learn
Learn
Build
Build
Build
Build
Build
Build
BuildBuild
Build
Build
Build
Build
Build
Learn
Learn
Build
Build
Build
Learn
Learn
LearnLearn
Build
Build
Build
Learn
Build
Build
Learn
Learn
LearnLearn
Build
Build
Build
Build
Learn
Learn
Learn
Build
Build
Build
Learn
Learn
Learn
Build
Build
Learn
Learn
Build
Build
Build

Joe Morgan
@joesmorgan
Lawrence, KS

I write code
I try to get a little better everyday

Journeymen: Experience and Intuition

How does that relate to software?

Frontend CodeServer CodeServers

Server Dev Ops AngularNoSQL Functional OOAWS SQL DB

Server Dev Ops Angular 2NoSQL Functional OOAWS SQL DB

Eye: What can you see?
Hand: What can you build?

Eye: What can you see?
Hand: What can you build?
Mind: What do you know?

[The chipping paint] could be an
example of machine-cutting
"without sharp blades," adding
"it looks like they painted before
they actually cut the piece."

$offset = $argv[0];
$query = "SELECT id, name FROM products ORDER BY name LIMIT 20
OFFSET $offset;";

“Woz designed all the hardware and all the circuit boards
and all the software that went into the Appie II… not one
bug has ever been found … the circuit design of the
Apple II is widely considered to be astonishingly
beautiful, as close to perfection as one can get in
engineering.”
-- Vikram Chandra Geek Sublime

Hand: What we normally associate with craft

Mind: How much you understand
We can test you on this!

FizzBuzz:
Write a function that prints the numbers
from 1 to 20.
Print “Fizz” for multiples of 3
Print “Buzz” for multiples of 5
Print “FizzBuzz” for multiples of 3 and 5

FizzBuzz:
for (let i=1; i <= 20; i++) {
if (i % 3 === 0 && i % 5 === 0) {
console.log("FizzBuzz");
} else if (i % 3 === 0) {
console.log("Fizz");
} else if (i % 5 === 0) {
console.log("Buzz");
} else {
console.log(i);
}
}

for (let i=1; i <= 20; i++) {
if (i % 3 === 0 && i % 5 === 0) {
console.log("FizzBuzz");
} else if (i % 3 === 0) {
console.log("Fizz");
} else if (i % 5 === 0) {
console.log("Buzz");
} else {
console.log(i);
}
}
FizzBuzz:
Who cares?

Understand Style
“When program statements were arranged in a
sensible order, experts were able to remember
them better than novices. When statements
were shuffled, the experts’ superiority was
reduced”
-- Steve McConnell Code Complete

Understand Style
function email() {
var form =
document.getElementById('contact-form');
var re =
/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}
.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
for(input of form.elements) {if(input.test(re)) {
return input;
}
}
else{return false;
}
}

{
var val
if (isInteger)
x = x + ''
var shoul_Add
else {
shoul_Add=true
}
if(shoul_Add) {
if(x !== '14') {
arr.push(x);
}
}
return arr
}
It works!

{
var val
if (isInteger)
x = x + ''
var shoul_Add
else {
shoul_Add=true
}
if(shoul_Add) {
if(x !== '14') {
arr.push(x);
}
}
return arr
}
Cultivate Dissatisfaction

{
var val
if (isInteger)
x = x + ''
var shoul_Add
else {
shoul_Add=true
}
if(shoul_Add) {
if(x !== '14') {
arr.push(x);
}
}
return arr
}
Learn Community Standards

{
var val
if (isInteger)
x = x + ''
var shoul_Add
else {
shoul_Add=true
}
if(shoul_Add) {
if(x !== '14') {
arr.push(x);
}
}
return arr
}
Learn Community Standards:
Read Code

{
var val
if (isInteger)
x = x + ''
var shoul_Add
else {
shoul_Add=true
}
if(shoul_Add) {
if(x !== '14') {
arr.push(x);
}
}
return arr
}
Use A Linter

<?
class House {
public $rooms = 3;
public function getRooms() {
return $this->rooms;
}
}
$h = new House();
$h->getRooms();
// 3

<?
class House {
public $rooms = 3;
static $bathrooms = 1;
}
static function getBathrooms() {
return self::$bathrooms;
}
}
$h = new House();
$h->getRooms();
// 3
$h::getBathroom();
// 1

<?
class House {
public $rooms = 3;
}
}
}
$h = new House();
$h->getRooms();
// 3
$h::getBathroom();
// 1
Code Review

<?
class House {
public $rooms = 3;
}
}
}
$h = new House();
$h->getRooms();
// 3
$h::getBathroom();
// 1
Why is this static?

<?
class House {
public $rooms = 3;
}
}
}
$h = new House();
$h->getRooms();
// 3
$h::getBathroom();
// 1
Uhh…..

<?
class House {
public $rooms = 3;
}
}
}
$h = new House();
$h->getRooms();
// 3
$h::getBathroom();
// 1
Be Deliberate

<?
class House {
public $rooms = 3;
}
static $bath_rooms = '1';
static function get_Bathrooms() {
$arr = [];
$arr.push(self::$bath_rooms);
if(false){
return self;
}
return self::$bath_rooms;
}
}

<?
class House {
public $rooms = 3;
}
$arr = [];
if(false){
return self;
}
}
}
Do it again. Then
give it back to me.

<?
class House {
public $rooms = 3;
}
$arr = [];
if(false){
return self;
}
}
}
Reviewers

<?
class House {
public $rooms = 3;
}
$arr = [];
if(false){
return self;
}
}
}
Reviewers: You are
not being nice when
you withhold
feedback.

<?
class House {
public $rooms = 3;
}
$arr = [];
if(false){
return self;
}
}
}
No feedback?

<?
class House {
public $rooms = 3;
}
$arr = [];
if(false){
return self;
}
}
}
No feedback?
Write Test

.then(data => {
return data.json();
})
.then(author => {
if(!name) {
} else {
} else {
}
}
})
}
Test

.then(data => {
return data.json();
})
.then(author => {
if(!name) {
} else {
} else {
}
}
})
}
Async
Lots of conditionals
Calls another
method
Calls another
method

.then(data => {
return data.json();
})
.then(author => {
if(!name) {
} else {
} else {
}
}
})
}
Every test and every
assertion is a statement
of why code exists

.then(data => {
return data.json();
})
.then(author => {
if(!name) {
} else {
} else {
}
}
})
}
If it’s hard to test

.then(data => {
return data.json();
})
.then(author => {
if(!name) {
} else {
} else {
}
}
})
}
If it’s hard to test,
make it easier to test

Mind: Not as important as you think

In Shakespeare:
The top 10 most frequently occuring words make up
21.4% of all words.
The top 100 most frequently occuring words make up
53.9% of all words.

✔ Basics
✔ Things work (at least it seems so)
✔ Learning by reading/doing

Relationships between parts
DNS Server Server Nginx/Apache
Index file
(backend)
RouterRender DOM
JavaScript
and CSS

Relationships between parts
/etc
/var
/sys
/sbin
/usr

var path;
alternativePath)) {
}
cb();
return;
}
}
}
}
}
Smelly Code

var path;
alternativePath)) {
}
cb();
return;
}
}
}
}
}
Long parameter list
Complex conditional blocks
Uncommunicative name
Differing return statements

var path;
alternativePath)) {
}
cb();
return;
}
}
}
}
}
Coding Horror
Code Smells

var path;
alternativePath)) {
}
cb();
return;
}
}
}
}
}
Don’t
memorize
smells.

var path;
alternativePath)) {
}
cb();
return;
}
}
}
}
}
Trust yourself

Build Intuition and Refactoring

Pop Quiz
Build Intuition and Refactoring

1. Get an array of unique items
2. Determines if a string starts
with an uppercase letter
3. Calculate the area of a circle
given radius

function getUniqueItems(arr) {
let unique = [];
for(let item of arr) {
if(!unique.includes(item)) {
unique.push(item);
}
}
return unique;
}

let unique = [];
unique.push(item);
}
}
return unique;
}
Cultivate Disatisfaction

let unique = [];
unique.push(item);
}
}
return unique;
}
You can look up
solved problems

return arr.reduce((unique, item) => {
return unique.includes(item) ? unique : [...unique, item];
}, [])
}

return arr.reduce((unique, item) => {
return unique.includes(item) ? unique : [...unique, item];
}, [])
}
Iterate Over Ideas

function getUniqueItems(items) {
return [...new Set(items)];
}

function getUniqueItems(items) {
return [...new Set(items)];
}
Test

Why do things exist
const x = ['a', 'b', 'c'];
...x
// 'a', 'b', 'c'

Solve the problem
const x = ['a', 'b', 'c'];
x.push('d');
x;
['a', 'b', 'c', 'd'];

const x = ['a', 'b', 'c'];
x.push('d');
x;
['a', 'b', 'c', 'd'];
What is the [X] way to solve the
problem?

const x = ['a', 'b', 'c'];
x.push('d');
x;
['a', 'b', 'c', 'd'];
What is the JavaScript way to
solve the problem?

const x = ['a', 'b', 'c'];
x.push('d');
x;
['a', 'b', 'c', 'd'];
solve the problem?
mutation

const x = ['a', 'b', 'c'];
const y = [...x, 'd'];
y;
['a', 'b', 'c', 'd'];
x;
['a', 'b', 'c'];
solve the problem?

const x = ['a', 'a', 'b', 'c'];
const copyX = [...x];
const combined = [...x, ...y];
const unique = [...new Set(x)];
solve the problem?

solve the problem?
const x = ['a', 'a', 'b', 'c'];
const copyX = [...x];
const combined = [...x, ...y];
const unique = [...new Set(x)];
No Mutations

What is the Python way to solve
the problem?

Learn Principles
… BUT they should really be
there to solidify what you’ve
been seeing

Learn Principles
This was the book that showed me there were
names for so many patterns that I’d discovered
purely through fumbling around with my own code.
-- Rebecca Murphey on JavaScript Patterns

Learn Principles
… they are there to help
communicate

Learn Principles
Experience without theory is
blind, but theory without
experience is mere intellectual
play -- Immanuel Kant

Learn Principles
… run everything through your
hands or eyes

Learn Principles
… Before I created Rails, I redrew many of the
diagrams in OmniGraffle for Martin Fowler because
I liked the book so much
-- David on Patterns of Enterprise Architecture

Learn Principles
…The trick to reading this book is to carefully read
through every single refactoring pattern and then
try to apply it on your code base (you don’t have to
commit if it doesn’t fix things). You can’t just blow
through it or you won’t really learn it.
-- David on Refactoring

Learn Principles
✔ Algorithms
✔ Mutations/Side Effects
✔ Patterns (Gang of Four)
✔ SOLID

See Abstractions Across Projects

“We have included only designs
that have been applied more
than once in different systems…
Most … have never been
documented before”
-- Gang of Four Design Patterns

“How many times have you
had design déjà vu -- that
feeling that you’ve solved a
problem before but not
knowing exactly where or
how?

Foo.js -- src
-- components
-- button.js
-- link.js
-- footer.js
-- util
-- colors

Rule of three:
“The first time you do something, you just do
it. The second time you do something similar,
you wince at the duplication, but you do the
duplicate thing anyway. Third you do
something similar, you refactor.”
-- Martin Fowler Refactoring

import fetch from 'isomorphic-fetch';
function updateInventory(store) {
return fetch(`http://foo.com/inventory?key=abc&name=${store}`)
.then(response => response.json())
.then((result) => {
const count = result.inventory.toLocaleString();
return `Inventory is ${count}.`;
});
}
export default updateInventory;

import fetch from 'isomorphic-fetch';
return fetch(`http://foo.com/inventory?key=abc&name=${store}`)
.then(response => response.json())
.then((result) => {
});
}
Tightly coupled to api

import expect from 'expect';
import nock from 'nock';
import updateInventory from './coupled1';
describe('inventory update', () => {
it('should update inventory', () => {
nock('http://foo.com')
.get('/inventory')
.query({
key: 'abc',
name: 'bar',
})
.reply(200, { inventory: 1350 });
return updateInventory('bar').then((result) => {
expect(result).toEqual('Inventory is 1,350.');
});
});
});

import nock from 'nock';
nock('http://foo.com')
.get('/inventory')
.query({
key: 'abc',
name: 'bar',
})
.reply(200, { inventory: 1350 });
return updateInventory('bar').then((result) => {
});
});
});
Hijack the http request

import { getInventory } from './inventoryManager';
return getInventory(store)
.then((result) => {
});
}

import { getInventory } from './inventoryManager';
return getInventory(store)
.then((result) => {
});
}
Endpoint removed

import sinon from 'sinon';
import updateInventory from './coupled';
import * as i from './inventoryManager';
beforeEach(() => {
const fetchInventory = new Promise(resolve => resolve({ inventory: 1350 }));
sinon.stub(i, 'getInventory').returns(fetchInventory);
});
afterEach(() => {
i.getInventory.restore();
});
it('should update inventory', () => updateInventory('bar').then((result) => {
}));
});

import sinon from 'sinon';
import updateInventory from './coupled';
import * as i from './inventoryManager';
beforeEach(() => {
const fetchInventory = new Promise(resolve => resolve({ inventory: 1350 }));
sinon.stub(i, 'getInventory').returns(fetchInventory);
});
afterEach(() => {
i.getInventory.restore();
});
it('should update inventory', () => updateInventory('bar').then((result) => {
}));
});
Mocking

function updateInventory(store, fetchInventory) {
return fetchInventory
.then((result) => {
});
}

function updateInventory(store, fetchInventory) {
return fetchInventory
.then((result) => {
});
}
Inject everything

const fetchInventory = new Promise(resolve => {
resolve({ inventory: 1350 })
});
return updateInventory('bar', fetchInventory).then((result) => {
});
});
});

Master the why of your language
first

Dan Abramov
Wanted to speak at a JS
conference in Europe.
Redux

Dan Abramov
Applied Elm architecture in React
Redux

Elm
UI
UpdateView
message
model
HTML

Redux
UI
ReducerView
action
state
HTML

JavaScript
Brendan Eich was recruited to make Scheme into a
scripting language. Netscape partner Sun Systems
demanded it be similar to Java.
Brendan Eich wrote it in 10 days.

Linux
Linus Torvalds wanted to try out a new
chip.

Linux
I'm doing a (free) operating system (just a hobby, won't be big and
professional like gnu)... This has been brewing since april, and is
starting to get ready. I'd like any feedback on things people
like/dislike in minix, as my OS resembles it somewhat (same
physical layout of the file-system...

Why
They understood their inspirational
material enough to take what they needed.

Style Feedback Flow
Beautiful Refactor Patterns
Abstract Reusable Creativity

Joe Morgan
@joesmorgan | thejoemorgan.com

Unbreakable: The Craft of Code

More Related Content

What's hot (20)

Similar to Unbreakable: The Craft of Code (20)

More from Joe Morgan (6)

Recently uploaded (20)

Unbreakable: The Craft of Code