Identifying your target market

You and Your Team

Humans

• Rational
• Forthcoming
• Super chill
• Remember all things always

document.querySelectorAll(
  '.page-List_of_cognitive_biases .wikitable td > b:first-child'
).length

  //172

Humans

• Occasionally rational
• Make mistakes under stress
• Easily confused, distracted
• Can solve hella problems, though
• We deserve to be happy *

Developers

• Special and unique
• Deadlines
• Tooling Fatigue
• Much time debugging
• Rarely old problems (at least to us) (ideally)

Hell is other people

Jean-Paul Sartre

Hell is other people's code

anonymous

Requirements

What are we gonna do?

• Maximize productivity
• Decrease frustration
• Increase happiness
• Decrease errors
• Increase adaptability

Our Toolbox:

Process, Tooling, Code

Process

• Code review
• Deployments
• Documenting Requirements
• Task management
• Developer Development
• Knowledge sharing

Tooling

• Linting
• IDEs, your own tools
• Minifiers, transpilers
• Package management
• Version control
• Testing
• Module Bundlers
• Task runners
• Virtual machines
• Database migrations

Code

• Languages
• Libraries
• Legacy
• Style
• Syntax
• Structure
• etc.

Intuitive code 🍼

See code

↕

Understand Code

See code

↕

Understand Code

• 2m: find function
• 2s: read function
• 8s: reread function, more carefully
• 3m: get distracted by email
• 2s: read function
• 20s: try to figure out what it's doing
• 3m: google/stack overflow!
• 3m: distracted by context switch

User Interface Design

• Discoverability
• Clarity
• Hierarchy of information
• Context
• Consistency
• Error prevention and recovery

Noise Reduction 🎵

Signal:Noise Ratio

Noisy

• Incomprehensible algorithms
• Exact Repetition
• Near Repetition
• "^\(*\d{3}\)*( |-)*\d{3}( |-)*\d{4}$"
• Side effects
• Inexplicable integers
• syntax?

var newList;
for (var i = list.length - 1; i >= 0; i -= 1) {
  newList[] = transform(list[i]);
}

  //vs

newlist = list.map(transform);

"There are " + data.string1.numDogs + " dogs attacking my "
  + data.string1.target"

  //vs

const {numDogs, target} = data.string1;

`There are ${numDogs} dogs attacking my ${target}`

{
  numDogs: numDogs,
  target: target
}

  //same as

{numDogs, target}

Cognitive Load 🚚

Your brain is a finite resource.

  //..
  qok = foo()
  bar(qok)

  //...
  myThing = [bar + '', pseudo]

  } else {  //else what?
    doThis();
    return false;
  }
}

if (!requiredCondition) return false;

//...etc

  function classMethodNumber45(name, context, arr, mode, elem, data, url, language){
   if {
     //...
     //...line 125
     if (data){
        url = url + "data"
        fetch(url).then(function(returnData){
          for (var i = returnData.length - 1; i >= 0; i -= 1) {
            // do some stuff here
          }
        });
     }
   } else if (){

   }
  //etc
  }

J++

and the curious case of the nested loop

Cyclomatic complexity 😵

The number of unique paths through your application

ESLint rules 👌

• complexity
• max-depth
• max-len
• max-nested-callbacks
• max-params
• max-statements

Reduce the information necessary to understand a given statement 🏖

Can you say what it does it in a sentence?

Encapsulation & composition 🌍⭐️⭕️

Clarity 🌞️

Naming things 😰

If you don’t know what a thing should be called, you cannot know what it is. If you don’t know what it is, you cannot sit down and write the code.

Drop hints

const isValid //> valid
const numFerrets || ferretCount //> ferret

//get, fetch, find, create

Use design patterns, carefully

formatter, adapter, service

Specific and Succinct

*watch for easily confused or vague words

Parsing

investmentProductCollection
incomeProductCollection

78% similarity

SavingsPlans, incomeProducts

Talk to people

Don't not name things

So what?

You are a user interface designer

Build habits

Your process is a design project

Higher and higher

Further Reading

• Eliminate javascript Code smells (
• Programming style and your brain (
• Learn how to write good code (overarching title, but some great tips)
• Inventing on Principle (must-watch)