lightning-round.md

CLI Linter for Ruby

Lint as a term can also refer more broadly to syntactic discrepancies in general, especially in interpreted languages like JavaScript and Python. For example, modern lint checkers are often used to find code that doesn't correspond to certain style guidelines. They can also be used as simple debuggers for common errors, or hard to find errors such as heisenbugs.

Tells you where and why your code's awful.

Follows the Ruby Style Guide a crowd-sourced set of best practices and style suggestions written and maintained by real-world Rubyists. Rubocop will automatically refactor common mistakes, and point out (but not modify) ones that are code-breaking when they're detected.

Install it in atom to get real-time suggestions and make sure your code follows Ruby stylesheet standards!

• Install atom beautify package(sublime also supported)
• Install Rubocop gem

$ gem install rubocop

• Link Rubocop up to atom beautify:
  • Atom > Preferences > Packages > Beautify > Ruby
    • Default Beautifier: Rubocop
    • Rubocop Path: /Users/Bricky/.rvm/gems/ruby-2.3.0/bin/rubocop
    • To find your path run $ which rubocop
• Default behavior is control + option + b you can also right-click and select 'Beautify editor contents'

This Garbage

### Becomes

Syntactically Awesome Style Sheets

It's Awesome, synactically.

• Allows variables for colors, fonts
• Mixins (~Ruby Modules)
• Partials
• functions
• inheritance
• nesting
• Blow dryer for your CSS - makes it DRY
• No learning curve! Valid CSS is valid SCSS!
• Included by default since Rails 3.1

Variables

$font-stack:    Helvetica, sans-serif;
$color1: rgba(45, 49, 66, 1);
$color2: rgba(191, 192, 192, 1);
$color3: rgba(255, 255, 255, 1);
$color4: rgba(79, 93, 117, 1);
$color5: rgba(233, 129, 34, 1);

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Partials

// _reset.scss

body {
   margin: 0;
  padding: 0;
}

/ application.scss
@import 'reset';

body {
  font: $font-stack;
  background-color: $color1;
}

Functions

border-color: darken($color1, 10%);

.container { width: 100%; }

article {
  width: 600px / 960px * 100%;
}

Inheritance

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}