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
   

   View Slide

2. WEB DEVELOPER
   CONTRIBUTE(D) TO
   ...
   jQuery
   CanIUse
   GitHub.js
   PureCSS
   WRITE(D) FOR
   ...
   SitePoint
   Tuts+
   .NET magazine
   php [architect]
   Telerik
   

   View Slide

3. AUTHORED BOOKS
   JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS
   (Shameless self-promotion!)
   

   View Slide

4. View Slide

5. DEVELOPER GOALS
   As developers we have to focus on two main goals:
   Create value for the company
   Write good code
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

9. A TEAM ISN'T A GROUP OF
   SINGLE DEVELOPERS
   

   View Slide

10. THIS IS ALLOWED
    

    View Slide

11. THIS IS NOT ALLOWED
    SNIPPET 1
    SNIPPET 2
    SNIPPET 3
    LIWKLVVHWWLQJVQDYLJDWLRQ^
    WKLVVHWWLQJVQDYLJDWLRQ
    FKLOGUHQ
    UHPRYH&ODVVWKLVVHWWLQJVDFWLYH1DYLJDWLRQ&ODVV
    HTLQGH[
    DGG&ODVVWKLVVHWWLQJVDFWLYH1DYLJDWLRQ&ODVV
    `
    WKLVVHWWLQJVRQ,WHP&KDQJHWKLV
    YDUV QVKHDGHUVHWWLQJV
    LIQVXWLOOD\RXW
    OUJ
    ^
    VPHQXFRQWDWWU
    DULDKLGGHQ
    WUXH
    VPHQXFRQWILQG
    D
    DWWU
    WDELQGH[
    
    `HOVH^
    VPHQXFRQWUHPRYH$WWU
    DULDKLGGHQ
    
    VPHQXFRQWILQG
    D
    UHPRYH$WWU
    WDELQGH[
    
    `
    VPHQXFRQWDGG&ODVV
    EROG
    
    VHWIXQFWLRQHOHPYDOXH^
    LIVXSSRUWUDGLR9DOXH YDOXH UDGLR
    M4XHU\QRGH1DPHHOHPLQSXW^
    YDUYDO HOHPYDOXH
    HOHPVHW$WWULEXWHW\SHYDOXH
    LIYDO^
    HOHPYDOXH YDO
    `
    UHWXUQYDOXH
    `
    `
    

    View Slide

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
    

    View Slide

13. PROBLEM
    A code base including all of these different styles is harder to
    maintain and to follow.
    

    View Slide

14. View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

18. AUTOMATION TOOLS
    Any modern company is using (or should use) at least one of the
    following tools:
    Grunt
    Gulp
    Broccoli
    

    View Slide

19. LET THE AUTOMATION BEGIN
    HTML + CSS + JS = پ
    

    View Slide

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.
    

    View Slide

21. THE WEB DOESN'T NEED OR DESERVE INVALID
    HTML
    

    View Slide

22. CODE EXAMPLES
    S!
    DUWLFOH!
    K!+HOORZRUOGK!
    DUWLFOH!
    S!
    D!
    OL!+HOOROL!
    D!
    WLPH!1RYHPEHUWLPH!
    WHAT THESE SNIPPETS HAVE IN COMMON?
    

    View Slide

23. THEY ARE ALL INVALID!
    

    View Slide

24. GRUNT-HTML
    “ Grunt plugin for html validation, using the
    vnu.jar markup checker. ”
    https://github.com/jzaefferer/grunt-html
    

    View Slide

25. GRUNT-HTML
    INSTALLATION
    QSPLQVWDOOJUXQWKWPOVDYHGHY
    CONFIGURATION EXAMPLE
    KWPOOLQW^
    DOO>
    SDJHV KWPO
    
    GHPR KWPO
    @
    `
    

    View Slide

26. GRUNT-HTML OUTPUT
    

    View Slide

27. CSS
    CSS is becoming more powerful year after year thanks to the
    introduction of new properties and values.
    

    View Slide

28. WE HAVE PASSED FROM
    

    View Slide

29. TO
    http://afranoubarzadeh.se/cssart.html
    

    View Slide

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.
    

    View Slide

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
    `
    

    View Slide

32. ANSWER: PRETTY MUCH EVERYTHING!
    Many parts of the code that aren't strictly errors but that can be
    improved.
    SO...
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

36. GRUNT-CONTRIB-CSSLINT OUTPUT
    

    View Slide

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.
    

    View Slide

38. SASS EXAMPLE
    PDS
    
    KHOOR
    
    ZRUOG
    
    VRPHWKLQJ
    WRGR
    
    WHVW
    
    :+,7())))))
    P\FODVV^
    SRVLWLRQDEVROXWH
    ZLGWKPDSJHWPDSWHVW
    `
    EXWWRQ^
    EDFNJURXQGFRORU
    ERUGHUQRQH
    WH[WDOLJQFHQWHU
    GLVSOD\LQOLQHEORFN
    FRORU:+,7(
    FXUVRUSRLQWHU
    IRQWVL]HS[
    `
    

    View Slide

39. RESULTING CSS CODE
    P\FODVV
    ^
    SRVLWLRQDEVROXWH
    ZLGWK
    `
    EXWWRQ
    ^
    EDFNJURXQGFRORU
    ERUGHUQRQH
    WH[WDOLJQFHQWHU
    GLVSOD\LQOLQHEORFN
    FRORU))))))
    FXUVRUSRLQWHU
    IRQWVL]HS[
    `
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

44. GRUNT-SCSS-LINT OUTPUT
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

47. GRUNT-JSCS
    “ grunt-jscs uses to check a project's
    JavaScript code style. ”
    JSCS
    https://github.com/jscs-dev/grunt-jscs
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

53. JAVASCRIPT CODE EXAMPLE
    
    XVHVWULFW
    
    IXQFWLRQIRR^
    YDUVXP
    REM ^
    WHVW+HOOR
    VRPH
    WKLQJ
    
    `
    IRUYDUL LL
    ^
    VXP L
    `
    FRQVROHORJVXP
    IRUYDUNH\LQREM^
    FRQVROHORJ
    NH\
    NH\
    DQGYDOXH
    REM>NH\@
    `
    `
    IRR
    

    View Slide

54. GRUNT-JSCS OUTPUT
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

60. MY FAVORITE FEATURES
    maxcomplexity
    maxdepth
    maxparams
    

    View Slide

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.
    

    View Slide

62. GRUNT-CONTRIB-JSHINT OUTPUT
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

65. GRUNT-TENON-CLIENT
    INSTALLATION
    QSPLQVWDOOJUXQWWHQRQFOLHQWVDYHGHY
    To know more about it, read and
    .
    the task page on GitHub the
    Tenon documentation
    

    View Slide

66. GRUNT-TENON-CLIENT OUTPUT
    

    View Slide

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
    

    View Slide

68. THANK YOU!
    

    View Slide

69. QUESTIONS?
    

    View Slide

70. CONTACTS
    Website:
    Email:
    Twitter:
    www.audero.it
    a.derosa@audero.it
    @AurelioDeRosa
    

    View Slide