Pro Yearly is on sale from $80 to $50! »

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.

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

November 18, 2015
Tweet

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!)
  4. None
  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.
  14. None
  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