Twin Cities Code Camp 11 talk.

1. Web Development with
Sass and CoffeeScript
Brian P. Hogan
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

2. Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

3. What about you?
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

4. Web pages run on CSS
and JavaScript
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

5. CSS feels limited
and repetitive
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

6. and many people don’t
really understand
JavaScript
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

7. Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

8. We need to use
better tools to build
modern web apps.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

9. CoffeeScript lets us
write complex JS with
simpler syntax.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

10. Sass gives us
extensions to CSS.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

11. Sass + CoffeeScript +
automated workflow
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

12. CoffeeScript
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

13. It’s more of a new
syntax than a new
language.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

14. Some jQuery
$(function() {
$("a#get").click(function(e) {
.get("/ajax/get",
{name: "John",time: "2pm"},
function(data) {
$("#result").html(data);
}
);
});
});
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

15. in CoffeeScript
$ ->
$("a#get").click (e) ->
$.get "/ajax/get",
{name: "John", time: "2pm"},
(data) ->
$("#result").html(data)
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

16. CoffeeScript borrows
from Python and Ruby
syntax.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

17. CoffeeScript uses
significant whitespace
for scope.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

18. CoffeeScript compiles
to regular, plain old
JavaScript.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

19. Declaring variables and objects
var box, colors, firstName, lastName;
firstName = "Homer" firstName = "Homer";
lastName = "Simpson" lastName = "Simpson";
colors = ["Green", "Blue", "Red"] colors = ["Green", "Blue", "Red"];
box = box = {
height: 40 height: 40,
width: 60 width: 60,
color: red color: red
};
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

20. JavaScript functions
// function declaration. Visible anywhere (hoisting)
(function hello(name){
alert("Hello " + name + "!");
}
// function expression, visible to the scope of the var
var hello = function(name){
alert("Hello " + name + "!");
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

21. Function declaration in CoffeeScript
hello ->
alert "Hello"
hello (name) ->
alert "Hello #{name}"
-> (thin arrow)
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

22. CoffeeScript uses function expressions.
hello (name) ->
alert "Hello #{name}!"
var hello = function(name){
alert("Hello " + name + "!");
}
#{} interpolates strings.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

23. New syntax
means new features.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

24. a jQuery example
$(function() {
var displayError, displaySuccess, url;
$("form").submit(function(event) {});
event.preventDefault();
url = $(this).attr("href");
$.ajax({
url: url + ".js",
success: function(data, status, xhr) {
displaySuccess($("#form"));
},
error: function(xhr, status, error) {
displayError(error);
}
});
displaySuccess = function(form) {
var element;
element = $("<p>Thanks for signing up!").addClass("success");
element.insertAfter(form);
form.hide();
};
displayError = function(error) {
$("#notice").attr("html", error);
};
});
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

25. jQuery $(function(){})
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) ->
displaySuccess($("form"))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

26. jQuery event handler
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) ->
displaySuccess($("form"))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

27. jQuery $.ajax
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) ->
displaySuccess($("form"))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

28. success and error callbacks
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) ->
displaySuccess($("form"))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

29. -> leaves (this) scope alone.
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) ->
displaySuccess($("form"))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

30. =>
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

31. => binds this to the function body
$ ->
$("form").submit (event) ->
event.preventDefault()
url = $(this).attr "href"
$.ajax
url: url + ".js"
success: (data, status, xhr) =>
displaySuccess($(this))
error: (xhr, status, error) ->
displayError error
displaySuccess = (form) ->
element = $("<p>Thanks for signing up!").addClass("success")
element.insertAfter form
form.hide()
displayError = (error) ->
$("#notice").attr "html", error
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

32. Comprehensions
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

33. Simple iteration
alert color for color in ["red", "green", "blue"]
var colors = ["red", "green", "blue"];
for (i = 0, length = colors.length; i < length; i++) {
var color = colors[i];
alert(color);
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

34. “for in”
people = [
{name: "Homer", age: 42}
{name: "Bart", age: 10}
]
for person in people
alert "#{person.name} is #{person.age} years old"
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

35. That’s just the
beginning.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

36. Existential operator (?)
total ?= 0
if (typeof total !== "undefined" && total !== null) {
total;
} else {
total = 0;
};
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

37. Object-oriented
JavaScript
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

38. Classes
var Person, p;
Person = (function() {
function Person(options) {
this.firstname = options.firstname;
this.lastname = options.lastname;
this.age = options.age;
}
Person.prototype.fullname = function() {
return "" + this.firstname + " " + this.lastname;
};
return Person;
})();
p = new Person({
firstname: "Brian",
lastname: "Hogan"
});
alert(p.fullname());
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

39. Classes
var Person, p;
Person = (function() {
function Person(options) {
this.firstname = options.firstname;
this.lastname = options.lastname;
class Person
this.age = options.age;
constructor: (options) ->
}
@firstname = options.firstname
Person.prototype.fullname = function() {
@lastname = options.lastname
return "" + this.firstname + " " + this.lastname;
@age = options.age
};
return Person;
fullname: ->
})();
"#{@firstname} #{@lastname}"
p = new Person({
firstname: "Brian",
lastname:="Hogan"
p new Person
}); alert p.fullname()
alert(p.fullname());
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

40. We can even extend classes!
class basicWindow
constructor: -> class mainWindow extends basicWindow
@window = Ti.UI.createWindow({ constructor: ->
backgroundColor: "#F5F5ED" super
}) @window.backgroundColor = "#fff"
open: ->
@window.open()
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

41. How do we use it?
In the web browser itself
via Node.js
With Ruby, via Guard
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

42. In the browser?
<script language="text/coffeescript">
people = [
{name: "Homer", age: 42}
{name: "Bart", age: 10}
]
for person in people
do (person) ->
alert "#{person.name} is #{person.age} years old"
</script>
<script src="coffee-script.js"></script>
(this is slow.)
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

43. With Node.js
Install Node.js
Install npm
npm install -g coffee-script
coffee --compile --output js/ coffee/
coffee -o js/ -cw coffee/
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

44. Ruby and Guard
Install Ruby
gem install guard-coffeescript
In our project
guard init coffeescript
guard
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

45. Guard watches input
folders for changes
and writes output
files.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

46. Guard works with Sass
too.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

47. Sass
Syntactically Awesome
Stylesheets
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

48. Sass gives CSS
everything programmers
want.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

49. CSS
.sidebar {
color: #000;
border: 1px solid #000;
}
.sidebar p {
margin-bottom: 20px;
}
.sidebar ul {
margin-bottom: 10px;
}
.sidebar h1 {
margin-bottom: 0;
}
.main{
color: #000;
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

50. CSS
.sidebar {
color: #000;
border: 1px solid #000;
}
.sidebar p {
margin-bottom: 20px;
}
.sidebar ul {
margin-bottom: 10px;
}
.sidebar h1 {
margin-bottom: 0;
}
.main{
color: #000;
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

51. CSS
.sidebar {
color: #000;
border: 1px solid #000;
}
.sidebar p {
margin-bottom: 20px;
}
.sidebar ul {
margin-bottom: 10px;
}
.sidebar h1 {
margin-bottom: 0;
}
.main{
color: #000;
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

52. Sass to
the rescue!
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

53. Variables!
$measure: 20px
$color: #ce4dd6
.sidebar
background-olor: $color
border: 1px solid lighten($color, 20%)
p
margin-bottom: $measure
ul
margin-bottom: $measure / 2
h1
margin-bottom: 0
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

54. Variables and helper functions!
$measure: 20px
$color: #ce4dd6
.sidebar
background-olor: $color
border: 1px solid lighten($color, 20%)
p
margin-bottom: $measure
ul
margin-bottom: $measure / 2
h1
margin-bottom: 0
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

55. Scope with nesting
$measure: 20px
$color: #ce4dd6
.sidebar
background-olor: $color
border: 1px solid lighten($color, 20%)
p
margin-bottom: $measure
ul
margin-bottom: $measure / 2
h1
margin-bottom: 0
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

56. Indented Sass SCSS
$measure: 20px $measure: 20px;
$color: #000 $color: #000;
.sidebar .sidebar{
color: $color color: $color;
border: 1px solid $color border: 1px solid $color;
p p{
margin-bottom: $measure margin-bottom: $measure;
}
ul
margin-bottom: $measure / 2 ul{
margin-bottom: $measure / 2;
h1 }
margin-bottom: 0
h1{
margin-bottom: 0;
}
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

57. But wait...
there’s more!
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

58. Modularization
_mixins.scss @import "mixins";
@import "reset";
@import "base";
_reset.scss @import "fonts";
_base.scss
_fonts.scss
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

59. Reusable Functions (mixins)
blockquote {
@mixin rounded($radius){
width: 225px;
border-radius: $radius;
padding: 15px 30px;
-moz-border-radius: $radius;
margin: 0;
-webkit-border-radius: $radius;
position: relative;
}
background: #faa;
@include rounded(20px);
}
.button {
cursor: pointer;
color: #000;
text-decoration: none;
@include rounded(12px);
}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

60. Mixins + Interation + Variables
@mixin shadow($x, $y, $offset, $color)
@each $prefix in "", -moz-, -webkit-, -o-, -khtml-
#{$prefix}box-shadow: $x $y $offset $color
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

61. Mixins + Interation + Variables
@mixin shadow($x, $y, $offset, $color)
@each $prefix in "", -moz-, -webkit-, -o-, -khtml-
#{$prefix}box-shadow: $x $y $offset $color
box-shadow: 5px 5px 5px #dddddd;
-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
-o-box-shadow: 5px 5px 5px #dddddd;
-khtml-box-shadow: 5px 5px 5px #dddddd; }
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

62. Create well-organized
folders and libraries
of stylesheets.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

63. or use Compass.
http://compass-style.org/
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

64. Compass has helpers
@import 'compass'
@include box-shadow(#ddd 5px 5px 5px)
box-shadow: 5px 5px 5px #dddddd;
-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
-o-box-shadow: 5px 5px 5px #dddddd;}
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

65. How do we use it?
via Sass
via a supported IDE
With Ruby, via Guard
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

66. with Sass
Install Ruby
$ gem install sass
$ sass --watch sass:stylesheets
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

67. Ruby and Guard
Install Ruby
gem install guard-sass
In our project
guard init sass
guard
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

68. Using Sass and
CoffeeScript
together
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

69. Mindscape Web
Workbench
http://www.mindscapehq.com/products/web-workbench
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

70. Ruby and Guard
Install Ruby
gem install guard-sass guard-
coffeescript
In our project
guard init sass
guard init coffeescript
guard
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

71. Let’s talk deployment
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

72. Rails 3.1 and
Capistrano
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

73. Asset Packaging
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

74. So instead of this...
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/style.css">
<script src="javascripts/jquery-1.7.0.min.js"></script>
<script src="javascripts/app.js"></script>
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

75. ...let’s do this:
<link rel="stylesheet" href="assets/app.css">
<script src="assets/app.js"></script>
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

76. Ruby + Guard + Jammit
Install Ruby
$ gem install guard-jammit
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

77. Sass, CoffeeScript,
Jammit
watch Sass files for changes
Place output css in tmp/ folder
watch CoffeeScript files for changes
Place output js in tmp/ folder
Use Jammit to combine them.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

78. config/assets.yml
stylesheets:
app:
- tmp/app.css
- tmp/style.css
javascripts:
app:
- javascripts/jquery-1.6.4.js
- tmp/app.js
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

79. Guardfile
guard "coffeescript", :input => "coffeescripts", :output => "tmp"
guard "sass", :input => "sass", :output => "tmp"
guard "jammit" do
watch(/^javascripts/(.*).js/)
watch(/^stylesheets/(.*).css/)
watch(/^tmp/(.*).js/)
watch(/^tmp/(.*).css/)
end
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

80. Jammit places
files in
public/assets
<link rel="stylesheet" href="assets/app.css">
<script src="assets/app.js"></script>
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

81. Deploy with Rake
SERVER = "yourhost.com"
USERNAME = "yourusername"
REMOTE_FOLDER = "/home/#{USERNAME}/yourhost.com"
REMOTE_FOLDER = 22
require 'net/scp'
desc "compile CSS, js files"
task :compile do
require 'guard'
Guard.setup
Guard::Dsl.evaluate_guardfile
Guard::guards.each{|guard| guard.run_all}
end
desc "Deploy web site"
task :deploy => :compile do
Net::SSH.start(SERVER, USERNAME, {:port => PORT} ) do |ssh|
ssh.sftp.rmdir File.join(REMOTE_FOLDER, "public")
ssh.scp.upload! "public", REMOTE_FOLDER, :recursive => true
end
end
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

82. qedproject
https://github.com/napcs/qedproject
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

83. qedproject
Install Ruby
gem install qedproject
qedproject myapp -c -s -a -l jquery
creates app with Sass,
CoffeeScript, Asset packaging, and
jQuery
Sets up Guard and a simple Rake
file for deployment
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

84. Demo
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

85. Short syntax Nested
Selectors
Catch errors at
compile time Variables
List Mixins
Comprehensions
Composition
Classes
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

86. With asset packaging
and automated deployment...
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

87. ...CoffeeScript and Sass
make developers happy.
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

88. Questions?
http://pragprog.com/book/wbdev/web-
development-recipes
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682