Developing for
Humans
mature
Great programmers are not always
engineers
"Mature" engineering has
many facets
Writing
maintainable
code
Being a
zealous
reviewer
"If a lion could speak, we could not understand him"
Wittgenstein
My first
pull request
did
not
go well
Waterbear
Be a
But here are some of mine
your own
Develop
best practices
Caveats:
Programming should be
Hackathons, POCs, throwaway code is
fun
exempt
I am opinionated. Some of my opinions are controversial
Communicate intent through core concepts
Principles:
- Never sacrifice clarity for micro optimisations
- Semantic code is easily scannable
- Be type aware. Type safety leads to less errors
Semantic is
var result = [];
_.each(rums, function(rum){
if(rum.year < 1918){
result.push(rum);
}
});
_.filter(rums, function(rum){
return rum.year < 1918;
});
_.each(rums, function(rum){
if(rum.year < 1918){
rum.isDelicious = true;
}
});
_.map(rums, function(rum){
rum.isDelicious = rum.year < 1989;
return rum;
});
scannable
return types
function getAvailbleYears(rum){
var rumYears = {
'Angostura': [1, 5, 7 ,12],
'Havana Club': [1, 3, 4, 7]
};
return rumYears[rum];
}
function getAvailbleYears(rum){
var rumYears = {
'Angostura': [1, 5, 7 ,12],
'Havana Club': [1, 3, 4, 7]
};
return rumYears[rum] || [];
}
Functions should always return the same type
Consistent
Array
undefined
Array
Provide context through sensible naming
Principles:
- Keystrokes are cheap, comprehension is expensive
- Code is read more times than it is written
- Code will be read by people yet to join the company
Keystrokes are
cheap
Comprehension is
expensive
No single letter variables
No abbr in function names
Naming is
hard
but
important
var d = 5;
var stateList = ['good','bad'];
var open = true;
var elapsedTimeInDays = 5;
var possibleStates = ['good','bad'];
var isOpen = true;
Function names should imply a return type
function pending(){}
function orgs(){}
function states(){}
function calculatePercentage(){}
function isPending(){}
function hasOrganizations(){}
function getStates(){}
function getPercentage(){}
Variable names should be descriptive
Improve readability through clearer syntax
Principles:
- Reduce local confusion
- Write like the reader is a programmer, not a JS expert
use quirks
Never
if(~'human'.indexOf('u')){
// When is this executed?
}
if(_.includes('human', 'u')){
// This is a lot clearer
}
function isReadable(){
return !!this.readable;
}
function isReadable(){
return Boolean(this.readable);
}
var date = +new Date()
var date = Date.now();
Fail
function getSomething(){
if(condition) {
// Long
// function
// body
// example
if(otherCondition){
return true;
}
}
return false;
}
function getSomething(){
if(!condition){
return false;
}
// Long
// function
// body
// example
return Boolean(otherCondition);
}
Avoid many nested conditions by returning as quickly as possible
fast
Nested Ternary Expressions
Reduce confusion by not digging rabbit holes
Keep flow control at the
highest level
possible
function submitForm(){
var data = this.getFormData();
validateForm(data);
}
function validateForm(data){
if(isValid(data)){
augmentData(data);
}
}
function augmentData(data){
data.something = 123;
makeXHRCall(data);
}
function submitForm(){
var data = this.getFormData();
if(!isValid(formData)){
return;
}
var augmentedData = augmentData(data);
makeXHRCall(data);
}
function augmentData(data){
data.something = 123;
return;
}
Else is
function isProper(sausage){
if(sausage.isMadeOfChicken()){
return false;
} else {
return true;
}
}
function isProper(sausage){
if(sausage.isMadeOfChicken()){
return false;
}
return true;
}
redundant
If you need an else in your function then your function does too much.
Human
.js
Copy of dfh
By Will Demaine
Copy of dfh
- 1,621