Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Human Linter — Ilya Gelman

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.

The Human Linter — Ilya Gelman

  1. 1. THE HUMAN LINTER Ilya Gelman
  2. 2. Ilya Gelman - Organizer of AngularJS-IL - Organizer of ReactJS-Israel - Passionate about design and UX Sr. Developer & Consultant @ 500Tech
  3. 3. BAD CODE
  4. 4. Had to deploy fast Didn’t read the documentation Hoped to refactor later It wasn’t me New technology
  5. 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. 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. 7. EXAMPLES FROM REAL WORLD
  8. 8. ? if (connected) {
 return true;
 } else {
 return false;
 } return connected;
  9. 9. ? if (connected) {
 return true;
 } else {
 return false;
 } return connected;!!
  10. 10. ? if (!isActive) {
 isActive = true;
 } else {
 isActive = false;
 } isActive = !isActive;
  11. 11. ? if (!grade) {
 grade = 100;
 } grade = grade || 100;
  12. 12. ? if (books) {
 books.map(fn);
 } else {
 return [];
 } (books || []).map(fn);
  13. 13. ? let point = {};
 
 point.x = 10;
 point.y = 29; const point = {
 x: 10,
 y: 29
 };
  14. 14. ? while (processing) {
 const config = {
 option1: 123,
 option2: 456
 };
 
 // ...
 } const config = {
 option1: 123,
 option2: 456
 };
 
 while (processing) {
 // ...
 }
  15. 15. ? .sort((a, b) => {
 return a > b;
 }); .sort((a, b) => a > b); ES6
  16. 16. ? {
 email: email,
 password: password
 } { email, password } ES6
  17. 17. 1 == "1" TRUE
  18. 18. 1 === "1" FALSE
  19. 19. http://codepen.io/borisd/pen/jbNory Async Actions $http.get(API_URL).then(function () {
 redirectTo(profileUrl)
 });
  20. 20. function perimeter(top, right, bottom, left) {
 return Math.sum(top, right, bottom, left);
 }
 
 perimeter(20, 15, 23, 12); ES6
  21. 21. 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
  22. 22. function perimeter(top, right, bottom, left) {
 return Math.sum(top, right, bottom, left);
 }
 
 perimeter(/* top */ 20, /* right */ 15, /* bottom */ 23, /* left */ 12); ES6
  23. 23. element.addEventListener('click', listener, false);
 
 element.removeEventListener('click', listener, false); Clean Listeners
  24. 24. Useless Comments // Clicks the edit icon T.simulate.click(editBtn);
  25. 25. Unreadable Variable Names .map((b, i) => {
 return {
 catalogId: i,
 description: getDescription(b.isbn),
 };
 });
  26. 26. Unreadable Variable Names .map((book, index) => {
 return {
 catalogId: index,
 description: getDescription(book.isbn),
 };
 });
  27. 27. Unreadable Variable Names const getBook = (book, index) => {
 return {
 catalogId: index,
 description: getDescription(book.isbn),
 };
 } .map(getBook);
  28. 28. // TODO: Implement later // FIXME: Change later Technical Debt
  29. 29. WHAT TO DO
  30. 30. if (viewLoading) {
 element.classList.add('active');
 } else {
 element.classList.remove('active');
 } element.classList.toggle('active', viewLoading);
  31. 31. READ THE DOCS
  32. 32. RE-READ THE DOCS
  33. 33. 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,

  34. 34. free for open-source projects
  35. 35. javascripting.com USE THIRD-PARTY
  36. 36. orders.map('customer').unique().average('payment'); http://sugarjs.com
  37. 37. SMALL COMMITS
  38. 38. com m it! BAD com m it! com m it! com m it!
  39. 39. 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!
  40. 40. 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!
  41. 41. Also, review "on-the-fly" to save time
  42. 42. http://www.osnews.com/story/19266/WTFs_m
  43. 43. js best practices
  44. 44. top programming mistakes
  45. 45. http://amzn.to/1bSAYsh http://amzn.to/1ydGaoB http://amzn.to/1K93J6h
  46. 46. WE ARE HIRING
  47. 47. Read our blog: http://blog.500tech.com Ilya Gelman ilya@500tech.com

×