$30 off During Our Annual Pro Sale. View Details »

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

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.

Aurelio De Rosa

November 18, 2015
Tweet

More Decks by Aurelio De Rosa

Other Decks in Programming

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
    [email protected]
    @AurelioDeRosa

    View Slide