the human linter
TRANSCRIPT
![Page 1: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/1.jpg)
THE HUMAN LINTER
Ilya Gelman
![Page 2: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/2.jpg)
Ilya Gelman
- Organizer of AngularJS-IL - Organizer of ReactJS-Israel - Passionate about design and UX
Sr. Developer & Consultant @ 500Tech
![Page 3: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/3.jpg)
BAD CODE
![Page 4: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/4.jpg)
Had to deploy fast
Didn’t read the documentation
Hoped to refactor later
It wasn’t me
New technology
![Page 5: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/5.jpg)
'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
![Page 6: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/6.jpg)
'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 } }
![Page 7: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/7.jpg)
EXAMPLES FROM REAL WORLD
![Page 8: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/8.jpg)
?if (connected) { return true; } else { return false; }
return connected;
![Page 9: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/9.jpg)
?if (connected) { return true; } else { return false; }
return connected;!!
![Page 10: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/10.jpg)
?if (!isActive) { isActive = true; } else { isActive = false; }
isActive = !isActive;
![Page 11: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/11.jpg)
?if (!grade) { grade = 100; }
grade = grade || 100;
![Page 12: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/12.jpg)
?if (books) { books.map(fn); } else { return []; }
(books || []).map(fn);
![Page 13: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/13.jpg)
?let point = {}; point.x = 10; point.y = 29;
const point = { x: 10, y: 29 };
![Page 14: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/14.jpg)
?while (processing) { const config = { option1: 123, option2: 456 }; // ...}
const config = { option1: 123, option2: 456}; while (processing) { // ...}
![Page 15: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/15.jpg)
?.sort((a, b) => { return a > b; });
.sort((a, b) => a > b);
ES6
![Page 16: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/16.jpg)
?{ email: email, password: password}
{ email, password }
ES6
![Page 17: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/17.jpg)
![Page 18: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/18.jpg)
1 == "1"TRUE
![Page 19: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/19.jpg)
1 === "1"FALSE
![Page 20: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/20.jpg)
http://codepen.io/borisd/pen/jbNory
Async Actions
$http.get(API_URL).then(function () { redirectTo(profileUrl)});
![Page 21: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/21.jpg)
function perimeter(top, right, bottom, left) { return Math.sum(top, right, bottom, left); } perimeter(20, 15, 23, 12);
ES6
![Page 22: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/22.jpg)
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
![Page 23: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/23.jpg)
function perimeter(top, right, bottom, left) { return Math.sum(top, right, bottom, left); } perimeter(/* top */ 20, /* right */ 15, /* bottom */ 23, /* left */ 12);
ES6
![Page 24: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/24.jpg)
element.addEventListener('click', listener, false); element.removeEventListener('click', listener, false);
Clean Listeners
![Page 25: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/25.jpg)
Useless Comments
// Clicks the edit icon T.simulate.click(editBtn);
![Page 26: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/26.jpg)
Unreadable Variable Names
.map((b, i) => { return { catalogId: i, description: getDescription(b.isbn), }; });
![Page 27: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/27.jpg)
Unreadable Variable Names
.map((book, index) => { return { catalogId: index, description: getDescription(book.isbn), }; });
![Page 28: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/28.jpg)
Unreadable Variable Names
const getBook = (book, index) => { return { catalogId: index, description: getDescription(book.isbn), }; }
.map(getBook);
![Page 29: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/29.jpg)
// TODO: Implement later
// FIXME: Change later
Technical Debt
![Page 30: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/30.jpg)
WHAT TO DO
![Page 31: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/31.jpg)
if (viewLoading) { element.classList.add('active'); } else { element.classList.remove('active'); }
element.classList.toggle('active', viewLoading);
![Page 32: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/32.jpg)
READ THE DOCS
![Page 33: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/33.jpg)
RE-READ THE DOCS
![Page 34: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/34.jpg)
ESLint
https://github.com/500tech/code-style
.eslintrc
"generators": true, "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,
![Page 35: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/35.jpg)
![Page 36: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/36.jpg)
free for open-source projects
![Page 39: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/39.jpg)
SMALL COMMITS
![Page 40: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/40.jpg)
comm
it!
BAD
comm
it!
comm
it!
comm
it!
![Page 41: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/41.jpg)
GOOD
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
![Page 42: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/42.jpg)
BEST
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
comm
it!
![Page 43: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/43.jpg)
Also, review "on-the-fly" to save time
![Page 44: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/44.jpg)
http://www.osnews.com/story/19266/WTFs_m
![Page 45: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/45.jpg)
js best practices
![Page 46: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/46.jpg)
top programming mistakes
![Page 47: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/47.jpg)
http://amzn.to/1bSAYsh http://amzn.to/1ydGaoB http://amzn.to/1K93J6h
![Page 48: The Human Linter](https://reader031.vdocuments.us/reader031/viewer/2022030303/587b7ddc1a28ab9d448b49ad/html5/thumbnails/48.jpg)
WE ARE HIRING