We all have written bad code. We all still do, for whatever reasons. People have invented many code quality tools, but none of them can replace the person sitting in front of the screen. In this talk you will see examples of weird code and tips to make it clean, concise and eloquent.

1. THE HUMAN LINTER
Ilya Gelman

2. Ilya Gelman
- Organizer of AngularJS-IL
- Organizer of ReactJS-Israel
- Passionate about design and UX
Sr. Developer & Consultant @ 500Tech

3. BAD CODE

4. Had to deploy fast
Didn’t read the documentation
Hoped to refactor later
It wasn’t me
New technology

5. 'use strict';
const React = require('react');
const BaseMixin = require('mixins/base');
const ChildrenMixin = require('mixins/children');
const ComponentUtils = require('utils/component');
const Config = require('lib/config');
const Notification = require('components/notifications');
modure.exports = React.createClass({
displayName:'Form',
mixins:[BaseMixin,ChildrenMixin],
propTypes: {metadata: React.PropTypes.object.isRequired,
notifications: React.PropTypes.array
},
getChildContext(){ return { action: this._handleAction,
formId: this.props.id}},
⌥ ⌘ L

6. 'use strict';
const React = require('react');
const BaseMixin = require('mixins/base');
const ChildrenMixin = require('mixins/children');
const ComponentUtils = require('utils/component');
const Config = require('lib/config');
const Notification = require('components/notifications');
modure.exports = React.createClass({
displayName: 'Form',
mixins: [BaseMixin, ChildrenMixin],
propTypes: {
metadata: React.PropTypes.object.isRequired,
notifications: React.PropTypes.array
},
getChildContext() {
return {
action: this._handleAction,
formId: this.props.id
}
}

7. EXAMPLES
FROM
REAL WORLD

8. ?
if (connected) {
return true;
} else {
return false;
}
return connected;

9. ?
if (connected) {
return true;
} else {
return false;
}
return connected;!!

10. ?
if (!isActive) {
isActive = true;
} else {
isActive = false;
}
isActive = !isActive;

11. ?
if (!grade) {
grade = 100;
}
grade = grade || 100;

12. ?
if (books) {
books.map(fn);
} else {
return [];
}
(books || []).map(fn);

13. ?
let point = {};
point.x = 10;
point.y = 29;
const point = {
x: 10,
y: 29
};

14. ?
while (processing) {
const config = {
option1: 123,
option2: 456
};
// ...
}
const config = {
option1: 123,
option2: 456
};
while (processing) {
// ...
}

15. ?
.sort((a, b) => {
return a > b;
});
.sort((a, b) => a > b);
ES6

16. ?
{
email: email,
password: password
}
{ email, password }
ES6

18. 1 == "1"
TRUE

19. 1 === "1"
FALSE

20. http://codepen.io/borisd/pen/jbNory
Async Actions
$http.get(API_URL).then(function () {
redirectTo(profileUrl)
});

21. function perimeter(top, right, bottom, left) {
return Math.sum(top, right, bottom, left);
}
perimeter(20, 15, 23, 12);
ES6

22. function perimeter(options = {}) {
const opt = options;
return Math.sum(opt.top, opt.right, opt.bottom, opt.left);
}
perimeter({ top: 20, bottom: 23, left: 12, right: 15 });
ES6
* Not the best code, only shows options hash example

23. function perimeter(top, right, bottom, left) {
return Math.sum(top, right, bottom, left);
}
perimeter(/* top */ 20, /* right */ 15, /* bottom */ 23, /* left */ 12);
ES6

24. element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);
Clean Listeners

25. Useless Comments
// Clicks the edit icon
T.simulate.click(editBtn);

26. Unreadable Variable Names
.map((b, i) => {
return {
catalogId: i,
description: getDescription(b.isbn),
};
});

27. Unreadable Variable Names
.map((book, index) => {
return {
catalogId: index,
description: getDescription(book.isbn),
};
});

28. Unreadable Variable Names
const getBook = (book, index) => {
return {
catalogId: index,
description: getDescription(book.isbn),
};
}
.map(getBook);

29. // TODO: Implement later
// FIXME: Change later
Technical Debt

30. WHAT TO DO

31. if (viewLoading) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
element.classList.toggle('active', viewLoading);

32. READ THE DOCS

33. RE-READ THE DOCS

34. ESLint
https://github.com/500tech/code-style
.eslintrc
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": false,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"restParams": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"jsx": true,
"regexYFlag": true,
"regexUFlag": true,
},
"rules": {
// Disabled rules
"complexity": 0,
"no-extend-native": 0,
"no-process-env": 0,
"init-declarations": 0,
"no-restricted-modules": 0,
"no-sync": 0,
"no-undef-init": 0,
"linebreak-style": 0,
"no-inline-comments": 0,
"no-new-object": 0,
"no-ternary": 0,
"padded-blocks": 0,
"no-inner-declarations": 0,
"id-length": 0,
"id-match": 0,
"no-underscore-dangle": 0,
"sort-vars": 0,
"max-statements": 0,
// Warning level
"comma-dangle": [1, "always-multiline"],
"no-console": 1,
"no-control-regex": 1,
"no-empty": 1,
"no-func-assign": 1,
"consistent-return": 1,
"curly": [1, "all"],
"default-case": 1,
"dot-notation": 1,
"no-alert": 1,
"no-multi-spaces": 1,
"no-param-reassign": 1,
"no-warning-comments": [1, { "terms": ["todo",
"radix": 1,
"no-path-concat": 1,
"no-process-exit": 1,
"lines-around-comment": [1, { "beforeBlockComment":
"constructor-super": 1,
"prefer-template": 1,

36. free for open-source projects

37. javascripting.com
USE THIRD-PARTY

38. orders.map('customer').unique().average('payment');
http://sugarjs.com

39. SMALL COMMITS

40. com
m
it!
BAD
com
m
it!
com
m
it!
com
m
it!

41. GOODcom
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!

42. BEST
com
m
it!com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!
com
m
it!

43. Also, review "on-the-fly" to save time

44. http://www.osnews.com/story/19266/WTFs_m

45. js best practices

46. top programming mistakes

47. http://amzn.to/1bSAYsh http://amzn.to/1ydGaoB http://amzn.to/1K93J6h

48. WE ARE HIRING

49. Read our blog:
http://blog.500tech.com
Ilya Gelman
ilya@500tech.com