Dashing basics
From zero to hero
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/893837/wg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/894271/dash.png)
Frontend
- CoffeeScript -> JS
- HTML5
- SCSS - SASS
Backend
- Sinatra - Ruby
- Batman bindings
nananana
Setup
Prerequisites
- VirtualBox - https://www.virtualbox.org/
- Vagrant - https://www.vagrantup.com/
$ vagrant box add package.box --name ruby_box
$ vagrant init ruby_box
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/894054/forward.png)
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
and it's fun
Try Ruby course
FREE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/894216/tryrybu.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/893830/Ampex_recorder_internals.jpg)
Dashing internals
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/893932/structure.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/893893/widget1.png)
Widget
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rafalwarzycha/images/894123/tree.png)
// ----------------------------------------------------------------------------
// 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
Q&A
Dashing basics
By Rafał Warzycha
Dashing basics
- 568