Frontend

• CoffeeScript -> JS
• HTML5
• SCSS - SASS

Backend

• Sinatra - Ruby
• Batman bindings

Setup

Prerequisites

• VirtualBox - https://www.virtualbox.org/
• Vagrant - https://www.vagrantup.com/

$ vagrant box add package.box --name ruby_box

$ vagrant init ruby_box

Add port forward in Vagrantfile

$ vagrant up

$ vagrant ssh

$ cd /vagrant

$ git clone https://github.com/senssei/kitchen-dashboard.git

On ruby box

$ dashing start

Run dashing

Ruby basics

Ruby is a dynamic, reflective, object-oriented, general-purpose programming language.
It was designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan.

Features

• object oriented with mixins and metaclasses
• dynamic typing, duck typing
• dynamic reflection and metaprogramming
• closures, iterators, generators
• native threads and fibers
• plugin API in C
• package manager - gem
• large and powerfull standard library

Try Ruby course

Dashing internals

Structure

Anatomy of dashboard

<% content_for(:title) { "My super sweet dashboard" } %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;">
      </div>
    </li>
 
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-prefix="$">
      </div>
    </li>
  </ul>
</div>

sample.erb

Widget

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-number {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

}

UI

number.scss

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>

<p class="change-rate">
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
</p>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

Layout

number.html

class Dashing.Number extends Dashing.Widget
  @accessor 'current', Dashing.AnimatedValue

  @accessor 'difference', ->
    if @get('last')
      last = parseInt(@get('last'))
      current = parseInt(@get('current'))
      if last != 0
        diff = Math.abs(Math.round((current - last) / last * 100))
        "#{diff}%"
    else
      ""

  @accessor 'arrow', ->
    if @get('last')
      if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'

  onData: (data) ->
    if data.status
      # clear existing "status-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bstatus-\S+/g, ''
      # add new class
      $(@get('node')).addClass "status-#{data.status}"

Bindings

number.coffee

Sample data feed

current_karma = 0

SCHEDULER.every '2s' do
  last_karma     = current_karma
  current_karma     = rand(200000)

  send_event('karma', { current: current_karma, last: last_karma })
end

sample.rb

require 'twitter'


#### Get your twitter keys & secrets:
#### https://dev.twitter.com/docs/auth/tokens-devtwittercom
twitter = Twitter::REST::Client.new do |config|
  config.consumer_key = ENV['TWITTER_CONSUMER_KEY']
  config.consumer_secret = ENV['TWITTER_CONSUMER_SECRET']
  config.access_token = ENV['TWITTER_ACCESS_SECRET'] 
  config.access_token_secret = ENV['TWITTER_ACCESS_TOKEN'] 
end

search_term = [URI::encode('#devLDZ'), URI::encode('#scareCrew'), URI::encode('#guildWebDev') ] 

SCHEDULER.every '10m', :first_in => 0 do |job|
  begin
    term = search_term.sample
    tweets = twitter.search("#{term}")

    if tweets
      tweets = tweets.map do |tweet|
        { name: tweet.user.name, body: tweet.text, avatar: tweet.user.profile_image_url_https }
      end
      send_event('twitter_mentions', comments: tweets)
    end
  rescue Twitter::Error
    puts "\e[33mTwitter error #{$!}.\e[0m"
  end
end

Twitter feeds

twitter.rb