studiorooster

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
. ~/.bashrc
mkdir ~/local
mkdir ~/node-latest-install
cd ~/node-latest-install
curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
./configure --prefix=~/local
make install # ok, fine, this step probably takes more than 30 seconds...
curl https://www.npmjs.org/install.sh | sh

studiorooster

<div class="col-md-6">
  {% if app.request.get('_route') == 'how_we_think' %}
    <div class="logo"><img src="{{ asset('ciw/images/logo_blue.png') }}"></div>
  {% else %}
    <div class="logo"><img src="{{ asset('ciw/images/logo_blue.png') }}"></div>
  {% endif %}
</div>

studiorooster

<style type="text/css">
  .resource_map_image { display: block; width: 1000px; height: 450px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
  .resource_map_image .resource_map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
  .resource_map_image #resource_map_link_0 { width: 177px; height: 143px; top: 80px; left: 64px; }
  .resource_map_image #resource_map_link_1 { width: 285px; height: 313px; top: 36px; left: 339px; }
  .resource_map_image #resource_map_link_2 { width: 150px; height: 124px; top: 266px; left: 114px; }
  .resource_map_image #resource_map_link_3 { width: 225px; height: 202px; top: 35px; left: 704px; }
  .resource_map_image #resource_map_link_4 { width: 169px; height: 136px; top: 257px; left: 695px; }
</style>
<div class="resource_map_image" style="background-image: url('/wp-content/uploads/cssmap/2015-05-14/resource_tree.jpg');">

studiorooster

<style type="text/css">
  .resource_map_image { display: block; width: 1000px; height: 450px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
  .resource_map_image .resource_map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
  .resource_map_image #resource_map_link_0 { width: 177px; height: 143px; top: 80px; left: 64px; }
  .resource_map_image #resource_map_link_1 { width: 285px; height: 313px; top: 36px; left: 339px; }
  .resource_map_image #resource_map_link_2 { width: 150px; height: 124px; top: 266px; left: 114px; }
  .resource_map_image #resource_map_link_3 { width: 225px; height: 202px; top: 35px; left: 704px; }
  .resource_map_image #resource_map_link_4 { width: 169px; height: 136px; top: 257px; left: 695px; }
</style>
<div class="resource_map_image">

studiorooster

// 2 Models - instead of teams and players, I have products and variations

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
import VueResource from 'vue-resource'

Vue.use(VueResource)

document.addEventListener('turbolinks:load', () => {
  Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

studiorooster

<%= content_tag :div,
id: "product-form",
data: {
  id: product.id,
  product: product.to_json(except: [:id, :created_at, :updated_at]),
  variations_attributes: product.variations.to_json(except: [:product_id, :created_at, :updated_at]),
} do %>

<label>Product Name</label>
<input type="text" v-model="product.name" />