---
layout      : 'default'
css         : 'javascript'

title       : 'Javascript'
description : 'Suggestions for Javascript development practices'
type        : 'UI Guide'
---

<%- @partial('header') %>
<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">General</a>
      <a class="item">Optional</a>
    </div>
  </div>

  <h2 class="ui dividing header">General</h2>

  <p>Airbnb has compiled a wonderful list for a <em>mostly reasonable</em> approach to javascript. This is an excellent starting point for community consensus on javascript standards.</p>

  <p><a href="https://github.com/airbnb/javascript">https://github.com/airbnb/javascript</a></p>

  <h2 class="ui dividing header">Optional Considerations</h2>

  <h3 class="ui header">Variable Alignment</h4>
  <p>Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called <a href="http://wbond.net/sublime_packages/alignment">Alignment</a> which can automatically manage this for you.</p>
  <div class="code" data-type="javascript">
    var
      dog      = 'Poodle',
      cat      = 'Cat',
      elephant = 'A long name'
    ;
  </div>

  <h3 class="ui header">Chaining</h4>
  <p>Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule</p>
  <div class="code" data-type="javascript">
    $element
      .find('.one')
        .doSomething()
        .end()
      .find('.two')
        .doSomethingElse()
    ;
  </div>

  <h3 class="ui header">Verbs</h4>
  <p>When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.</p>
  <div class="code" data-type="javascript">

    // this might require some more times with docs
    $element
      .widget('states.select.set')
    ;

    // reduce complexity to api
    $(element)
      .widget('activate', true)
    ;
  </div>

  <h3 class="ui header">Default Values</h4>
  <p>Using an OR value allows you to set defaults for any falsey value</p>
  <div class="code" data-type="javascript">
    (function(someBoolean, name) {
      var
        // this will have issues (false will evaluate same as undefined)
        someBoolean = someBoolean || true,
        // default name will be sally
        name        = name        || 'Sally'
      ;
      if(someBoolean) {
        alert(name);
      }
    }());
  </div>

  <h3 class="ui header">Grouping Variables</h4>
  <div class="code" data-type="javascript">
    // ok
    var
      offsetX = 2,
      offsetY = 5
    ;
    // nice
    var
      offset = {
        x: 2,
        y: 5
      }
    ;
  </div>

</div>