Improve the style and quality of your project. Automatically! - Topconf Tallinn 2015

When working in a team, you deal with people at different levels, from juniors to seniors. If you're the lead of the project, it's really hard to have all the developers involved following the same code conventions and having them writing the same high quality code you wish. But that's not their fault and nobody has to be blamed. Everyone has been there at some point in his or her career, and unless you want to go crazy, you can't review every line of code of the project.

In this talk, I'll discuss some tools that can help you in automatically checking the code style and quality of the HTML, CSS, Sass, and JavaScript of your team to improve the project without slowing anyone down.

Transcript

1. IMPROVE THE STYLE AND QUALITY OF YOUR PROJECT. AUTOMATICALLY! Aurelio De Rosa Tallinn, Estonia - 18 November 2015
2. WEB DEVELOPER CONTRIBUTE(D) TO ... jQuery CanIUse GitHub.js PureCSS WRITE(D) FOR ... SitePoint Tuts+ .NET magazine php [architect] Telerik
3. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)
5. DEVELOPER GOALS As developers we have to focus on two main goals: Create value for the company Write good code
6. FIRST GOAL A company's ultimate goal is to make money but many developers don't realize that. Without money there are no salaries to pay and no products to build.
7. SECOND GOAL Developers care about writing clean, readable, documented, performant, consistent, and testable code (or at least they should). Writing good code is also beneficial for the software and, ultimately, for the company.
8. THIS TALK'S GOAL This talk focuses on developers and companies that want to deploy software made of good quality code by introducing tools that automatically perform several checks on different areas.
9. A TEAM ISN'T A GROUP OF SINGLE DEVELOPERS
10. THIS IS ALLOWED
11. THIS IS NOT ALLOWED SNIPPET 1 SNIPPET 2 SNIPPET 3 LI WKLVVHWWLQJVQDYLJDWLRQ ^ WKLVVHWWLQJVQDYLJDWLRQ FKLOGUHQ UHPRYH&ODVV WKLVVHWWLQJVDFWLYH1DYLJDWLRQ&ODVV HT LQGH[ DGG&ODVV WKLVVHWWLQJVDFWLYH1DYLJDWLRQ&ODVV  ` WKLVVHWWLQJVRQ,WHP&KDQJH WKLV  YDUV QVKHDGHUVHWWLQJV LI QVXWLOOD\RXW   OUJ ^   VPHQXFRQW DWWU DULDKLGGHQ WUXH    VPHQXFRQW ILQG D DWWU WDELQGH[   `HOVH^   VPHQXFRQW UHPRYH$WWU DULDKLGGHQ    VPHQXFRQW ILQG D UHPRYH$WWU WDELQGH[ `  VPHQXFRQW DGG&ODVV EROG  VHWIXQFWLRQ HOHPYDOXH ^  LI VXSSRUWUDGLR9DOXH YDOXH UDGLR   M4XHU\QRGH1DPH HOHPLQSXW  ^   YDUYDO HOHPYDOXH   HOHPVHW$WWULEXWH W\SHYDOXH    LI YDO ^    HOHPYDOXH YDO   `   UHWXUQYDOXH  ` `
12. DIFFERENCES HIGHLIGHTS Code indentation Naming conventions Code quality (e.g.: inefficient use of jQuery) Spacing inside parenthesis Mixed use of single and double quotes Style for chained method calls
13. PROBLEM A code base including all of these different styles is harder to maintain and to follow.
15. "THE MUSKETEERS" PRINCIPLE “ A developer is one element of a team and should collaborate to achieve the common goal, but the team should code as if it was made of only one developer. ” — Aurelio De Rosa
16. IDEA: MANUAL CHECK The lead developer might take care of this task PROBLEM There isn't enough time to check every line of code of every single developer in the project. And it'd be so boring!
17. BETTER IDEA: AUTOMATION By automating all the checks, developers can save their time and improve the overall quality and style of the code base. So, it becomes easier to adhere to . "The musketeers" principle
18. AUTOMATION TOOLS Any modern company is using (or should use) at least one of the following tools: Grunt Gulp Broccoli
19. LET THE AUTOMATION BEGIN HTML + CSS + JS = پ
20. HTML The base of every website or web application is its HTML code. Writing correct and semantic markup is crucial and has a lot of benefits.
21. THE WEB DOESN'T NEED OR DESERVE INVALID HTML
22. CODE EXAMPLES S! DUWLFOH! K!+HOORZRUOGK! DUWLFOH! S! D! OL!+HOOROL! D! WLPH!1RYHPEHUWLPH! WHAT THESE SNIPPETS HAVE IN COMMON?
23. THEY ARE ALL INVALID!
24. GRUNT-HTML “ Grunt plugin for html validation, using the vnu.jar markup checker. ” https://github.com/jzaefferer/grunt-html
25. GRUNT-HTML INSTALLATION QSPLQVWDOOJUXQWKWPOVDYHGHY CONFIGURATION EXAMPLE KWPOOLQW^ DOO> SDJHV  KWPO  GHPR  KWPO @ `
26. GRUNT-HTML OUTPUT
27. CSS CSS is becoming more powerful year after year thanks to the introduction of new properties and values.
28. WE HAVE PASSED FROM
29. TO http://afranoubarzadeh.se/cssart.html
30. MISTAKES HAPPEN Due to the increasing complexity of the projects and what can be achieved with CSS, making mistakes has become easier. The good news is that many of these errors can be automatically detected.
31. QUESTION: WHAT'S WRONG WITH THIS CODE? FRQWHQWPDLQ FRQWHQWPDLQVHFWLRQZUDSSHU ^ ERUGHUWRSQRQH SDGGLQJS[S[S[S[ IORDWOHIW ZLGWK ` UHVLQQHUER[HGFRQWHQWUHVLPJDQGWH[WER[S ^ WH[WDOLJQOHIW ` UHVLPJDQGWH[WER[SUHVLPJDQGWH[WER[KHDGLQJ UHVWH[WWHDVHUER[SUHVLPJDQGWH[WER[KHDGLQJ ^ SDGGLQJERWWRPS[ PDUJLQERWWRPS[ ERUGHUERWWRPS[GRWWHG IRQWVL]HHP `
32. ANSWER: PRETTY MUCH EVERYTHING! Many parts of the code that aren't strictly errors but that can be improved. SO...
33. GRUNT-CONTRIB-CSSLINT “ grunt-contrib-csslint lints CSS files searching for problematic code by using several rules that you can tweak. ” https://github.com/gruntjs/grunt-contrib-csslint
34. RULES AVAILABLE important adjoining-classes known-properties box-sizing box-model overqualified-elements display-property-grouping bulletproof-font-face compatible-vendor-prefixes regex-selectors errors duplicate-background-images duplicate-properties empty-rules selector-max-approaching ... Complete list of rules at https://github.com/CSSLint/csslint/wiki/Rules
35. GRUNT-CONTRIB-CSSLINT INSTALLATION QSPLQVWDOOJUXQWFRQWULEFVVOLQWVDYHGHY CONFIGURATION EXAMPLE FVVOLQW^ DSS^ RSWLRQV^ LPSRUWDQWIDOVH  DGMRLQLQJFODVVHV IDOVH  NQRZQSURSHUWLHV IDOVH ` VUF VW\OHV FVV ` ` You can define all the rules in an external file called Ŝ…••Ž‹–”… (using the JSON format) or rely on the default configuration.
36. GRUNT-CONTRIB-CSSLINT OUTPUT
37. SASS Many developers use Sass instead of CSS for writing the style of a web project because it provides more features such as functions, mixins, and placeholders. So, there are even more threats and ways in which the code written by a team can diverge.
38. SASS EXAMPLE PDS  KHOOR  ZRUOG  VRPHWKLQJ WRGR  WHVW  :+,7()))))) P\FODVV^ SRVLWLRQDEVROXWH ZLGWKPDSJHW PDSWHVW  ` EXWWRQ^ EDFNJURXQGFRORU ERUGHUQRQH WH[WDOLJQFHQWHU GLVSOD\LQOLQHEORFN FRORU:+,7( FXUVRUSRLQWHU IRQWVL]HS[ `
39. RESULTING CSS CODE P\FODVV ^ SRVLWLRQDEVROXWH ZLGWK ` EXWWRQ ^ EDFNJURXQGFRORU ERUGHUQRQH WH[WDOLJQFHQWHU GLVSOD\LQOLQHEORFN FRORU)))))) FXUVRUSRLQWHU IRQWVL]HS[ `
40. INCONSISTENCIES EVERYWHERE The CSS code is valid but the source that generated it has several inconsistencies: Colors defined in different ways 3-spaces indentation for everything but the map Mixed use of single and double quotes
41. GRUNT-SCSS-LINT “ grunt-scss-lint lints your Sass files, written using the SCSS syntax, searching for code style (pun intended) issues and a bit more. ” https://github.com/ahmednuaman/grunt-scss-lint
42. RULES AVAILABLE BangFormat BemDepth BorderZero ColorKeyword ColorVariable Comment Compass Linters DebugStatement DeclarationOrder DisableLinterReason DuplicateProperty ElsePlacement EmptyLineBetweenBlocks EmptyRule ExtendDirective FinalNewline HexLength HexNotation HexValidation ... Complete list of rules at https://github.com/brigade/scss- lint/blob/master/lib/scss_lint/linter/README.md
43. GRUNT-SCSS-LINT INSTALLATION QSPLQVWDOOJUXQWVFVVOLQWVDYHGHY CONFIGURATION EXAMPLE VFVVOLQW^ RSWLRQV^ FRQILJ VFVVOLQW\PO ` DSS VW\OHV VFVV ` You can define all the rules in an external file called Ŝ•…••Ş Ž‹–Ŝ›Ž (using the YAML format) or rely on the default configuration.
44. GRUNT-SCSS-LINT OUTPUT
45. JAVASCRIPT Linting CSS and Sass is relatively straightforward because there aren't concepts like , , and , and many others in play. cyclomatic complexity unit testing time space complexity
46. JAVASCRIPT CODE STYLE JavaScript is a programming language and as such things are more complex. Achieving a consistent code style is harder because there are so many ways it can diverge.
47. GRUNT-JSCS “ grunt-jscs uses to check a project's JavaScript code style. ” JSCS https://github.com/jscs-dev/grunt-jscs
48. GRUNT-JSCS JSCS supports more than 150 rules and works with ECMAScript 2015, JSX, Flow, and much more. It's trusted by the jQuery team, Adobe, the Bootstrap team, the Wikimedia foundation, and many others.
49. RULES AVAILABLE disallowArrowFunctions disallowCurlyBraces disallowEmptyBlocks disallowKeywords disallowMultipleSpaces disallowMultiLineTernary disallowNodeTypes maximumLineLength maximumNumberOfLines requireAlignedObjectValues requireArrowFunctions requireBlocksOnNewline requireDotNotation requireNumericLiterals requireSemicolons requireSpread requireYodaConditions validateIndentation validateQuoteMarks ... Complete list of rules at http://jscs.info/rules.html
50. MY FAVORITE FEATURES It comes with preset configurations It automatically creates your configuration based on the closet preset configuration It automatically fix most of the errors found
51. WHAT GRUNT-JSCS WON'T FIX An example is the capitalization of comments. If you require all the comments to start with a capital letter and you have a comment like this: WKLVLVDFRPPHQW JSCS will not automatically change it into: 7KLVLVDFRPPHQW
52. GRUNT-JSCS INSTALLATION QSPLQVWDOOJUXQWMVFVVDYHGHY CONFIGURATION EXAMPLE MVFV^ RSWLRQV^ FRQILJ MVFVUF  HVQH[WWUXH IL[WUXH ` DSS^ VUF VFULSWV MV ` ` You can define all the rules in an external file called ŜŒ•…•”… (using the JSON format) or rely on the default configuration.
53. JAVASCRIPT CODE EXAMPLE XVHVWULFW  IXQFWLRQIRR ^ YDUVXP  REM ^ WHVW+HOOR VRPH WKLQJ ` IRU YDUL LL ^ VXP L ` FRQVROHORJ VXP  IRU YDUNH\LQREM ^ FRQVROHORJ  NH\ NH\ DQGYDOXH REM>NH\@  ` ` IRR 
54. GRUNT-JSCS OUTPUT
55. JAVASCRIPT CODE QUALITY When it comes to JavaScript, code quality is even more important, yet often subjective. The evaluation is related to the experience, skills, and preferences of the judge.
56. GRUNT-CONTRIB-JSHINT “ grunt-contrib-jshint is a task that uses to detect errors and potential problems in JavaScript code. ” JSHint https://github.com/gruntjs/grunt-contrib-jshint
57. GRUNT-CONTRIB-JSHINT JSHint is a static code analysis tool employed by companies and foundations such as jQuery, Yahoo!, and Mozilla. It can spot several different kind of mistakes, but it can't detect problems like a function that isn't working as expected or isn't fast enough.
58. DON'T OVERESTIMATE YOUR CODE “ Only 15% of all programs linted on jshint.com pass the JSHint checks. In all other cases, JSHint finds some red flags that could've been bugs or potential problems. ” — JSHint team
59. OPTIONS AVAILABLE bitwise curly eqeqeq forin freeze funcscope futurehostile globals iterator latedef maxcomplexity maxdepth maxerr maxparams maxstatements noarg nocomma nonbsp nonew ... Complete list of options at http://jshint.com/docs/options/
60. MY FAVORITE FEATURES maxcomplexity maxdepth maxparams
61. GRUNT-CONTRIB-JSHINT INSTALLATION QSPLQVWDOOJUXQWFRQWULEMVKLQWVDYHGHY CONFIGURATION EXAMPLE MVKLQW^ RSWLRQV^ MVKLQWUF MVKLQWUF ` DSS^ VUF VFULSWV MV ` ` You can define all the options in an external file called ŜŒ•Š‹–”… (using the JSON format) or rely on the default configuration.
62. GRUNT-CONTRIB-JSHINT OUTPUT
63. ACCESSIBILITY Accessibility is an area that requires manual testing for an in- depth evaluation. However, a team can still automate the minimal checks to achieve a decent base without a big effort.
64. GRUNT-TENON-CLIENT “ grunt-tenon-client uses and can identify 508 and WCAG 2.0 issues of web pages in any environment. ” Tenon https://github.com/egauci/grunt-tenon-client
65. GRUNT-TENON-CLIENT INSTALLATION QSPLQVWDOOJUXQWWHQRQFOLHQWVDYHGHY To know more about it, read and . the task page on GitHub the Tenon documentation
66. GRUNT-TENON-CLIENT OUTPUT
67. CONCLUSIONS Mind "The musketeers" principle Both code style and quality matter Mistakes are unavoidable... ...so help yourself and your team in fixing them with tools
68. THANK YOU!
69. QUESTIONS?
70. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa