DEVELOPER GOALS
As developers we have to focus on two main goals:
Create value for the company
Write good code
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
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.
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
Slide 13
Slide 13 text
PROBLEM
A code base including all of these different styles is harder to
maintain and to follow.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
"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
Slide 16
Slide 16 text
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!
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
AUTOMATION TOOLS
Any modern company is using (or should use) at least one of the
following tools:
Grunt
Gulp
Broccoli
Slide 19
Slide 19 text
LET THE AUTOMATION BEGIN
HTML + CSS + JS = پ
Slide 20
Slide 20 text
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.
Slide 21
Slide 21 text
THE WEB DOESN'T NEED OR DESERVE INVALID
HTML
Slide 22
Slide 22 text
CODE EXAMPLES
S!
DUWLFOH!
K!+HOORZRUOGK!
DUWLFOH!
S!
D!
OL!+HOOROL!
D!
WLPH!1RYHPEHUWLPH!
WHAT THESE SNIPPETS HAVE IN COMMON?
Slide 23
Slide 23 text
THEY ARE ALL INVALID!
Slide 24
Slide 24 text
GRUNT-HTML
“ Grunt plugin for html validation, using the
vnu.jar markup checker. ”
https://github.com/jzaefferer/grunt-html
CSS
CSS is becoming more powerful year after year thanks to the
introduction of new properties and values.
Slide 28
Slide 28 text
WE HAVE PASSED FROM
Slide 29
Slide 29 text
TO
http://afranoubarzadeh.se/cssart.html
Slide 30
Slide 30 text
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.
ANSWER: PRETTY MUCH EVERYTHING!
Many parts of the code that aren't strictly errors but that can be
improved.
SO...
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
GRUNT-CONTRIB-CSSLINT OUTPUT
Slide 37
Slide 37 text
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.
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
GRUNT-SCSS-LINT OUTPUT
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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.
Slide 47
Slide 47 text
GRUNT-JSCS
“ grunt-jscs uses to check a project's
JavaScript code style. ”
JSCS
https://github.com/jscs-dev/grunt-jscs
Slide 48
Slide 48 text
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.
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
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.
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
GRUNT-JSCS OUTPUT
Slide 55
Slide 55 text
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.
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
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.
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
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/
Slide 60
Slide 60 text
MY FAVORITE FEATURES
maxcomplexity
maxdepth
maxparams
Slide 61
Slide 61 text
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.
Slide 62
Slide 62 text
GRUNT-CONTRIB-JSHINT OUTPUT
Slide 63
Slide 63 text
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.
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
GRUNT-TENON-CLIENT
INSTALLATION
QSPLQVWDOOJUXQWWHQRQFOLHQWVDYHGHY
To know more about it, read and
.
the task page on GitHub the
Tenon documentation
Slide 66
Slide 66 text
GRUNT-TENON-CLIENT OUTPUT
Slide 67
Slide 67 text
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