This document discusses building a JavaScript style guide for Wikia. It recommends adopting existing style guides and tools like JSHint, JS-Beautify, and JSCS to define and enforce code quality and style rules. Using these tools helps programmers write consistent, readable code and makes it easier for code to comply with standards. The document also provides examples of code smells and style rules around issues like variable declarations, whitespace, and selector depth.

1. FREAKIN'
WHITESPACEBuilding a JavaScript Style Guide

2. LIZ LEE
@lizlux
Front End Engineer @Wikia
Front End Coding Conventions Team

3. MY GOAL
You too, can have a style guide...
In less than 6 months!

4. "The social universe for fans by fans"
"Create your own wiki, we'll host it!"

5. AWESOMENESS:
Open source
Community driven
400k+ wikias
100M monthly uniques
Ridiculous amounts of knowledge

6. CHALLENGES:
Heavily customized MediaWiki
Scrappy startup
Growth:
2010: 40 Employees
2014: 236 Employees
600% in 4 years

8. Squeaky wheel...
... gets to lead the JavaScript Coding Conventions group!

9. OUR MISSION
“ As a developer, I want a clear and
well documented guide covering coding
conventions, patterns and best practices
for JavaScript development at Wikia along
with tools to help me in making my code
compliant.

10. KEY PRINCIPLES

11. #1: TRUST THE CODE

12. //bad
$("#foo").addClass("active");
$("#foo").width(200);
$("#foo").click();
//better
var$foo=$("#foo");
$foo.addClass("active");
$foo.width(200);
$foo.click();
//best
$("#foo").addClass("active")
.width(200)
.click();

13. CODE SMELLS
"Any symptom in the source code of a program that possibly
indicates a deeper problem"
-Wikipedia

14. SMELLS
Conditional complexity
Mix-matched white space
Long methods
Long parameter lists
Duplicate code
etc.

15. BROKEN WINDOWS EFFECT
Crime begets crime
Smelly code begets smelly code

16. JQUERY OBJECT CACHING
$("#foo").addClass("active");
$("#foo").width(200);
$("#foo").click();
//...
$("#foo").css('color','blue');//WTF?!
$("#foo").text('derp!');//>.<

17. "Fool me once..."

18. RULEZ!
https://github.com/Wikia/guidelines/blob/master/JavaScript/CodingConventions.md#caching-jquery-
objects

19. MAX PARAMS
//smelly!
functionmakeImage(src,width,height,border,type,addedBy){...}
makeImages('myImage.gif','','','','','lizlux');
//muchbetter
functionmakeImage(options){...}
makeImage({
src:'myImage.gif',
user:'lizlux'
});

20. RULEZ!
https://github.com/Wikia/guidelines/blob/master/JavaScript/CodingConventions.md#maximum-
parameters

21. VAR "HOISTING"
functionfoo(){
bar();
varx=1;
}
//sameas
functionfoo(){
varx;
bar();
x=1;
}

22. Example:
varfoo=1;
functionbar(){
if(!foo){
varfoo=10;
}
alert(foo);//10
}
bar();
varfoo=1;
functionbar(){
varfoo;//fooisundefined
if(!foo){
foo=10;
}
alert(foo);//10
}
bar();

23. RULEZ!
https://github.com/Wikia/guidelines/blob/master/JavaScript/CodingConventions.md#variables

24. TRUST THE CODE

25. #2: DON'T REINVENT THE
WHEEL

26. “ As a developer, I want a clear and
well documented guide covering coding
conventions, patterns and best practices
for JavaScript development at Wikia along
with tools to help me in making my code
compliant.

27. WHAT WE DID WRONG:
Wrote all the rules
Then looked at the tools

28. FREAKIN' WHITESPACE!

29. WHITE SPACE
Went with jQuery because why not?
Here's why not:
eatPreztels(type);
"Function with a callback, object,
or array as the last argument
have no space after the last
argument"
- jQuery Style Guide
eatPretzels(type,function(){
return'Yum!';
});

30. MEDIAWIKI
eatDoughnuts(type,function(){
returnflavors['jelly'];
});

31. JSLINT

32. JSLINT
Created by Douglas Crockford, in 2002
“Discovered” JSON (created the spec)
Author of JavaScript, The Good Parts
2002 - the wild west of JavaScript
Mozilla 1.0
Netscape
IE6

33. STYLE RULES
Style rules help us write easy to read, well documented, and
consistent code.
LANGUAGE RULES
Language rules have an impact on functionality. They were
chosen based on performance implications and their
tendency to reduce bugs.

34. JSLINT STYLE RULES
Whitespace set up to read like english:
Spaces go after commas and colons, not before
Spaces after ifwhileforand functionas they
would in English
No space between function name and invoking
parentheses

35. BACKINTHEDAYTHEROMANSDIDNTUSE
SPACESORPUNCTUATIONANDMISUNDE
RSTANDINGSAROSESOTHEYHADTOINTR
ODUCETHESECONVENTIONSINTOTHEIR
WRITING

36. BACKINTHEDAY THEROMANS DIDNT
USESPA CESOR PUNCTU ATIONA
NDMISUNDER STANDI NGSA ROS
ESOTHEYH ADTOINT RODUCET
HESECONVE NTIONS INTOTH
EIRWRITING

37. Back in the day, the romans didn't use spaces or
punctuation, and misunderstandings arose, so they had to
introduce these conventions into their writing.

38. LANGUAGE RULES
“ If there is a feature of a language
that is sometimes problematic, and if it
can be replaced with another feature that
is more reliable, then always use the more
reliable feature.
~ Douglas Crockford

39. EQEQ "=="
//Bad
(foo==0)//foocanbe'',false,0
//Good
(foo===0)//foois0

40. POPULAR CODING CONVENTION ON
GITHUB
http://sideeffect.kr/popularconvention/#javascript

48. JSLINT
Commonly used
It works
New employees might already be familiar
Code quality tool compatibility
js-beautify: "jslint_happy"
JSHint

49. #3: PROGRAMMERS ARE LAZY
Good programmers are anyway!

50. TOOLS
JSHint
JS-Beautify
JSCS

51. It should be harder for us to fail than succeed.
Run tools in pre-commit hooks
IDE plugins
Auto-updating whitespace for legacy code (js-beautify)
Code Climate
Plato

52. JSHINT
Created by Anton Kovalyov in 2010
Fork of JSLint
Community driven
More configurable and forgiving than JSLint

53. “ Your sadly pathetic bleatings are
harshing my mellow.
~ Douglas Crockford

54. “ That is insanely stupid code. I am not
going to dumb down JSMin for this case.
~ Douglas Crockford

55. JSHINT
Config: .jshintrc
Ignore line or file
JSHint.com

56. JS-BEAUTIFY
Updates whitespace for you.
Developers are lazy!
"jslint_happy"
Config: .jsbeautifyrc

57. JSCS
JavaScript Code Sniffer
Enforces whitespace and style rules
Compliments JSHint
Config: .jscs.json
Ex: "requireCurlyBraces" and
"requireSpaceAfterKeywords"

58. CODE CLIMATE

59. CODE CLIMATE

60. PLATO

61. SCSS STYLE GUIDE

62. SCSS-LINT
Open source by Causes.com
Checks stuff like:
Alphabetizing properties
Whitespace
Selector depth

63. SMELLY CSS!

64. Duplicate Properties
/*bad*/
h1{
margin:10px;
text-transform:uppercase;
margin:0;//Seconddeclaration
}
/*acceptableforhandlingbrowsersupport*/
.box{
background:#fff;
background:rgba(255,255,255,.5);
}

65. Empty Rule
/*bad*/
.cat{
}

66. ID With Extraneous Selector
/*bad*/
#submit-button.button{
...
}
/*good*/
#submit-button{
...
}

67. Over-specificity & Selector Depth
/*bad-SCSSdoesn'thavetomatchtheHTMLstructure!*/
.wrapper{
.wrapper-inner{
ul{
li{
a{
.submit-button{
...
}
}
}
}
}
}
.wrapper.wrapper-innerullia.submit-button{...}

68. Sane Selector Depth
/*good-onlydowhat'snecessary*/
.wrapper{
.submit-button{
...
}
}

69. ANALYZE-CSS
Created by Macbre
Analyzes compiled css after preprocessors like SCSS and
SASS
Checks for duplicate rules due to mixins
Great for analyzing large code bases

70. RESOURCES
Wikia's JS style guide
Google’s JS style guide
AirBnB’s JS style guide
Douglas Crockford’s Coding Conventions for the JavaScript
Programing Language
JSLint
JSHint
JS-Beautify
JSCS
SCSS-Lint
Analyze-CSS

71. OTHER REFERENCES
http://www.wikia.com/About
http://www.adequatelygood.com/JavaScript-Scoping-and-
Hoisting.html
https://github.com/twbs/bootstrap/issues/3057#issuecomment
5135512
https://www.youtube.com/watch?v=taaEzHI9xyY
http://anton.kovalyov.net/p/why-jshint/

72. QUESTIONS?
liz at lizlux dot net
@lizlux