Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Roy Tomeij 80beans & SliceCraft @roy [email protected]

Slide 4

Slide 4 text

Compilers don’t create bad code. Coders create bad code.

Slide 5

Slide 5 text

What?

Slide 6

Slide 6 text

What are front-end meta languages? Front-end meta languages are languages that compile to HTML, CSS or JavaScript.

Slide 7

Slide 7 text

Why?

Slide 8

Slide 8 text

Why? • Quick results • DRY (Don’t Repeat Yourself) • Unforgiving compilers, so less errors • Better performance "out of the box" • Code is easier to maintain and transfer

Slide 9

Slide 9 text

Languages?

Slide 10

Slide 10 text

Which languages? • Haml • Sass (& Compass) • CoffeeScript

Slide 11

Slide 11 text

Haml

Slide 12

Slide 12 text

Haml • Mature; version 1.0 dates back to 2006 • Runs on Ruby (with a gem for Rails) • Ported to e.g. PHP, Python, .NET, Java & Perl • Indentation based • Customizable output (miniﬁcation, quotes, etc.) • Sadly, doesn’t come with Rails 3.1

Slide 13

Slide 13 text

!!! %section#about %h1 About us %p.introduction = link_to 'foo', 'bar' #carousel.projects :javascript alert('initialize'); %form{:method => 'post'} %fieldset %legend Some form...

About us

foo

<![CDATA[ alert('initialize'); ]]>

Some form...

Slide 14

Slide 14 text

LSassie

Slide 15

Slide 15 text

Sass • Used to be part of Haml • Went solo in version 3.1 • Indentation based (.sass) and CSS-based (.scss) • Customizable output (miniﬁed, etc.) • Ships with Rails 3.1

Slide 16

Slide 16 text

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects background: #000 section { color: #ff0; } section p.introduction { font-size: 2em; } #carousel { font-weight: bold; } #carousel.projects { background: #000; } Sass CSS

Slide 17

Slide 17 text

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects background: #000 section { color: #ff0; p.introduction { font-size: 2em; } } #carousel { font-weight: bold; &.projects { background: #000; } } Sass SCSS

Slide 18

Slide 18 text

Fancy stuff

Slide 19

Slide 19 text

More Sass (fancy stuff) • Variables • Mixins • Partials • Operations & built-in functions (math, colors, etc.) • User deﬁned functions • Way more!

Slide 20

Slide 20 text

$contrast: #ff0 $hover: #ccc =link-with-border($side: top) color: $hover border-#{$side}: solid 1px $contrast a color: $contrast background: image-url("rails.png") &:hover +link-with-border &.alternative +link-with-border(bottom) // Partials @import "homepage" @import "dir/*" @import "dir/**/*" a { color: #ff0; background: url(/assets/ ↵ rails-22b(...).png) } a:hover { color: #ccc; border-top: solid 1px #ff0; } a.alternative { color: #ccc; border-bottom: solid 1px #ff0; }

Slide 21

Slide 21 text

$color: white p width: ceil(10.4px + 2px) color: complement(green) color: $color color: desaturate(red, 20%) color: mix(rgba(255, 0, 0, 0.5), #00f) &:hover color: darken($color, 50%) p { width: 13px; color: purple; color: white; color: #e61919; color: rgba(63, 0, 191, 0.75); } p:hover { color: gray; }

Slide 22

Slide 22 text

$grid-width: 40px $gutter-width: 20px @function grid-width($n) @return $n * $grid-width + ($n - 1) * $gutter-width a width: grid-width(3) a { width: 160px; }

Slide 23

Slide 23 text

Comp ass

Slide 24

Slide 24 text

Compass • Collection of Sass mixins and functions • Does the tedious work, like managing vendor preﬁxes • Handles image sprites (and the likes) • Has mixins for CSS frameworks like Blueprint, YUI, 960.gs

Slide 25

Slide 25 text

@import "compass" .foo @include border-radius(10px) .be background-image: ↵ inline-image("flags/be.png") .foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .be { background-image: ↵ url('data:image/ ↵ png;base64,R0lGODlhMAAw(...)'); }

Slide 26

Slide 26 text

Sprites

Slide 27

Slide 27 text

@import "flags/*.png" @each $country in au, be, es, nl, us .#{$country} background: sprite($flags, $country) .au, .be, .es, .nl, .us { background: url(/assets/flags- ↵ s78dbbc28c3.png) no-repeat; } .au { background-position: 0 0; } .be { background-position: 0 -44px; } .es { background-position: 0 -22px; } .nl { background-position: 0 -33px; }

Slide 28

Slide 28 text

CoffeeScript

Slide 29

Slide 29 text

CoffeeScript • Not a JS library • Works seamlessly with any JS library • Compiled code is JS Lint friendly • Ships with Rails 3.1

Slide 30

Slide 30 text

some_var = 10 $('a').each -> console.log 'foo' foo = (bar) -> return false unless bar "Bar has #{bar} as value." this.available_globally = -> alert some_var (function() { var foo, some_var; some_var = 10; $('a').each(function() { return console.log('foo'); }); foo = function(bar) { if (!bar) { return false; } return "Bar has " + bar + " as value."; }; this.available_globally = function() { return alert(some_var); }; }).call(this);

Slide 31

Slide 31 text

# Assignment number = 42 opposite = true # Conditions number = -42 if opposite # Existence alert "Arrrr!" if jack? (function() { var number, opposite; number = 42; opposite = true; if (opposite) { number = -42; } if (typeof jack != "undefined" ↵ && jack !== null) { alert("Arrrr!"); } }).call(this);

Slide 32

Slide 32 text

# Object pirates = captain: name: "Jack Sparrow" clothing: "dirty" babe: name: "Elizabeth Swann" clothing: "dress" # Drink alcohol drink booze for booze ↵ in ['beer', 'wine'] (function() { var booze, pirates, _i, _len, _ref; pirates = { captain: { name: "Jack Sparrow", clothing: "dirty" }, babe: { name: "Elizabeth Swann", clothing: "dress" } }; _ref = ['beer', 'wine']; for (_i = 0, _len = _ref.length; _i < _len; _i++) booze = _ref[_i]; drink(booze); } }).call(this);

Slide 33

Slide 33 text

Asset pipeline

Slide 34

Slide 34 text

Rails 3.1 asset pipeline • Pre-processes assets • Uses Sprockets to concatenate and minify assets • “Fast by default” / Near zero conﬁguration • Your web app will load faster • PS: It’s still early, there’s room for improvement

Slide 35

Slide 35 text

Proper fingerprinting • No more “file.png?12345678” • Didn’t work 5-20% of the time • Issues with CDN’s & multi-server setups • Now: “file-37a52b9c.png”

Slide 36

Slide 36 text

What goes where? • app/assets: application owned assets • lib/assets: your own (reusable) libraries • vendor/assets: third party assets, like jQuery plugins • In the end, it’s all compiled to public/assets • PS: You can still use “public” (I don’t)

Slide 37

Slide 37 text

Chaining processors • Want to parse your Sass as ERB or something else ﬁrst? • Name your ﬁle application.css.sass.something_else.erb • Use case: put the Rails ENV in a Sass variable

Slide 38

Slide 38 text

Sprockets & Sass • Don’t use Sprockets directives for Sass • Use Sass’ @import instead

Slide 39

Slide 39 text

Pre-compiling • Run “rake assets:precompile” • Concatenating-minifying-compressing-moving action

Slide 40

Slide 40 text

Questions? and some goodies too @roy / [email protected]

Slide 41

Slide 41 text

More info • http://guides.rubyonrails.org/asset_pipeline.html • http://haml-lang.com/ • http://sass-lang.com/ • http://compass-style.org/ • http://jashkenas.github.com/coffee-script/ • http://thesassway.com/ • CoffeeScript book available from http://pragprog.com/ (20% discount with code “arrrrcamp2011”) • Awesome intro slide by Ivana Setiawan

Slide 42

Slide 42 text

Pictures • http://www.flickr.com/photos/uggboy/4087240166/ • http://www.flickr.com/photos/thisisnotaheidi/522583791/ • http://www.flickr.com/photos/kk/106960641/ • http://www.flickr.com/photos/8725928@N02/3125908458/ • http://www.flickr.com/photos/bjwolfebmx/2904133868/ • http://www.flickr.com/photos/roadsidepictures/1435060357/ • http://www.flickr.com/photos/martinlabar/75645691/ • http://www.flickr.com/photos/estherase/4124679737/ • http://www.flickr.com/photos/stuckincustoms/3930943796/