Supercharge Your Toolchain: Haml, Sass, CoffeeScript, Git, and Heroku

Christopher Webb Groupon

Hindsight

Supercharge Your Toolchain Haml, Sass, Coﬀee, Git, and Heroku

index.haml ➞ index.html

What’s wrong with HTML?

<article id=“featured”> <h1 class=“title”>Polaroid Fingerstache</h1> <div class=“date”>Mon, August 20, 2011</div>
<p>Polaroid scenster salvia fingerstache, tweet readymade hella wes anderson lo-fi squid traffaut occupy leggings ethical.</p> </article>

So what’s it look like?

<em>Cosby sweater</em> <strong>authentic 8-bit</strong> <div>Helvetica cardigan</div> HTML %em Cosby sweater
%strong authentic 8-bit %div Helvetica cardigan HAML Elements

<h1 class=“vip”>American Apparel</h1> <div class=“button”>direct trade</div> <div id=”featured” class=“deal”>Fixed gear</div>
HTML %h1.vip American Apparel .button direct trade #featured.deal Fixed gear HAML Classes & IDs

<article> <h1><a href=“#”>Selvage</a></h1> <p>Selvage freegan swag cliche vinyl bushwick.</p> </article>
HTML %article %h1 %a{:href => “#”} Groupon %p Selvage freegan swag cliche vinyl bushwick. HAML Nesting

!!! 5 %html{lang: "en-us"} %head %meta{charset: "utf-8"} %title Conspirator %link{rel:"stylesheet",
href: "/stylesheets/main.css"} %body #wrap %header %h1 %a{:href => “/”} Conspirator %nav %ul %li %a{:href => “/about”} About %li %a{:href => “/work”} Work %li %a{:href => “/contact”} Contact %section#main - @entries.each do |entry| %article %h3.title= entry.title %p.date= entry.posted.strftime("%A, %B %d, %Y") %p= entry.body Nesting

%p = [‘Hello’, ‘Prototype’, ‘Camp’].join “ ” = link_to ‘View
All Names’, names_path, {:class => ‘view-all’} HAML <p>Hello Prototype Camp</p> <a class=“view-all” href=“/names”>View All Names</a> HTML Ruby Evaluation

- foo = “A foolish consistency is the” - foo
<< “ hobgoblin” - foo << “ of little minds.” %p= foo - username = “Jay Gatsby” #greeting= “Welcome, #{username}!” HAML <p>A foolish consistency is the hobgoblin of little minds.</p> <div id=“greeting”>Welcome, Jay Gatsby!</div> HTML Run Ruby

Why Haml? • Consistency • Beautiful • DRY • Structure
• Focus

style.sass ➞ style.css

What’s wrong with CSS?

h1 a { color: #333 font-size: 30px; margin-bottom: 30px; }
h1 a span { color: #9c0; } #notes-module .title { color: #306e73; margin-bottom: 15px; } #footer h3 { color: #9c0; font-size: 15px; }

<!DOCTYPE html> <head> <title>Foo</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="widget.css"> </head> <body> <h1>Bar</h1> </body> </html>

Variables

$primary-color: red $spacer: 30px .entry color: $primary-color padding: $spacer/2 $spacer

Nesting

%ul %li %a{:href => “#”} Home %li.active %a{:href => “#”}
About %li %a{:href => “#”} Work %li %a{:href => “#”} Contact Haml

ul { padding-left: 0; } ul li { background: red;
} ul li.current { background: maroon; } ul li a { color: white; } CSS

$primary-color: red ul padding-left: 0 li background: $primary-color &:current background:
darken($primary-color, 20%) a color: white &:hover color: green

Mixins

=border-radius($radius: 5px) -webkit-border-radius: $radius -moz-border-radius: $radius border-radius: $radius .entry background:
red +border-radius .button background: red +border-radius(15px)

.entry { background: red; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
} .button { background: blue; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } CSS

Placeholder Attributes

%rounded-corners -webkit-border-radius: 15px -moz-border-radius: 15px border-radius: 15px .entry background: red
@extend %rounded-corners .button background: blue @extend %rounded-corners

.entry, .button { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.entry { background: red; } .button { background: blue; } CSS

Syntax

style.sass ➞ style.css

style.scss ➞ style.css style.sass ➞ style.css

.entry { color: red; padding: 15px 30px; } .css

$primary-color: red; .entry { color: $primary-color; padding: 15px 30px; }
.scss

$primary-color: red .entry color: $primary-color padding: 15px 30px .sass

.scss .sass • More like CSS • Beneﬁts of Sass
• Easily convert existing projects • Similar to LESS • Cleanest, most minimal syntax • Great to use with new projects • Go all the way style.scss 㱻 style.sass

Why Sass? • Easy to write • Easy to maintain
• Performance

CoﬀeeScript

app.coﬀee ➞ app.js

What’s wrong with JavaScript?

$.ajax({ context: $(‘form’), url: ‘http://foobar.baz’, dataType: ‘json’, done: function(data) {
var $r = $(this).find(‘.response’); var $f = $(this).find(‘.form-wrap’); $r.find(‘h1’).html(data.status); $f.slideUp(function(){ $r.slideDown(); }); } }); JavaScript

var happy = true; var knowIt = true; if (happy
&& knowIt) { clapHands(); } else { showIt(); } JavaScript

function eat(food) { console.log(food + "nom nom nom"); } var
food = ['stuffing', 'turkey', 'pie']; for (var i=0; i < food.length; i++) { eat(food[i]); }; // stuffing nom nom nom // turkey nom nom nom // pie nom nom nom JavaScript

Functions

$ -> $(‘a’).click -> $(this).addClass ‘do-work’ false

$(function(){ $(‘a’).click(function(){ $(this).addClass(‘do-work’); return false; }); }); JavaScript

Variable Safety

# Haml :javascript var a = 1; # Coffee a
= 5 console a, window.a # You might assume 5, 5

# Haml :javascript var a = 1; # Coffee ->
JavaScript (function(){ var a; a = 5; console(a, window.a); })(); # 5, 1

Objects

$.ajax context: $(‘form’) url: ‘http://foobar.baz’ dataType: ‘json’ done: (data) ->
$r = $r = $(this).find ‘.response’ $f = $(this).find ‘.form-wrap’ $r.find(‘h1’).html data.status $f.slideUp -> $r.slideDown

$.ajax({ context: $(‘form’), url: ‘http://foobar.baz’, dataType: ‘json’, done: function(data) {
var $r = $(this).find(‘.response’); var $f = $(this).find(‘.form-wrap’); $r.find(‘h1’).html(data.status); $f.slideUp(function(){ $r.slideDown(); }); } }); JavaScript

Conditionals

happy = true knowIt = true if happy and knowIt
clapHands() else showIt()

var happy = true; var knowIt = true; if (happy
&& knowIt) { clapHands(); } else { showIt(); } JavaScript

singing = true mood = if singing then “Happy” else
“Meh”

var singing = true; var mood = singing ? “Happy”
: “Meh”;

for food in [‘stuffing’, ‘turkey', ‘pie’] console.log "#{food} nom nom
nom" // stuffing nom nom nom // turkey nom nom nom // pie nom nom nom

var food, _i, _len, _ref; _ref = ['stuffing', 'turkey', 'pie'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; console.log("" + food + " nom nom nom"); } JavaScript

meal = [‘stuffing’, ‘turkey', ‘pie’] for food in meal when
food isnt ‘pie’ console.log "#{food} nom nom nom" // stuffing nom nom nom // turkey nom nom nom

var food, meal, _i, _len; meal = ['stuffing', 'turkey', 'pie'];
for (_i = 0, _len = meal.length; _i < _len; _i++){ food = meal[_i]; if (food !== 'pie') { console.log("" + food + " nom nom nom"); } } JavaScript

Why CoﬀeeScript? • Protection • Syntax • Readability

Start Using Haml, Sass, & CoﬀeeScript TODAY

Terminal

# Haml $ haml input.haml output.html # Sass $ sass
--watch app/sass:public/stylesheets # Coffee $ coffee --join project.js --compile src/*.coffee

GruntJS

CodeKit

Rails3

Sprockets + Asset Pipeline

$ git init

$ git status

$ git add . OR $ git add {path/to/file}

$ git commit -m ‘Init Commit’

$ git log

$ git show {SHA}

Heroku

$ heroku login

$ heroku create

$ git push heroku master

$ heroku run rake db:migrate

$ heroku open

Supercharge Your Toolchain Haml, Sass, Coﬀee, Git, and Heroku

Thank You

Christopher Webb [email protected] @conspirator

Supercharge Your Toolchain: Haml, Sass, CoffeeScript, Git, and Heroku

Supercharge Your Toolchain: Haml, Sass, CoffeeScript, Git, and Heroku

More Decks by Christopher Webb

Other Decks in Programming

Featured

Transcript