The document discusses using CoffeeScript and Sass to improve the web development process. CoffeeScript offers a cleaner syntax for writing JavaScript code, while Sass provides extensions to CSS. Together with an automated workflow, these tools allow developers to build modern web applications using better techniques that make the code more readable and maintainable. The presentation provides examples of how CoffeeScript cleans up JavaScript code and syntax, such as declaring variables and functions, as well as how it interacts with libraries like jQuery.

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