Skip to content

Latest commit

 

History

History
248 lines (153 loc) · 3.9 KB

index.md

File metadata and controls

248 lines (153 loc) · 3.9 KB

FED tools
in the Ruby ecosystem

Overview

  • What is Ruby
  • Great tools for FED:
    1. Sass
    2. Haml
    3. Middleman

Ruby

  • Programming language
  • Released 1995
  • Yukihiro Matsumoto (Matz)
  • Making programmers happy
  • User experience focued
  • Leads to productivity and fun

Examples

"Jimmy".reverse  ➟ ymmiJ

hi

5.times { print "Odelay!" } 

➟ Odelay!Odelay!Odelay!Odelay!Odelay!

Ecosystem

Tools in the spirit of its philosophy

Syntactic sugar

syntax within a programming language that is designed to
make things easier to read or to express.

5.times { print "Odelay!" }

↓

for (int i = 0; i < 5; i++) {
	print "Odelay!";
}

"5.times" is native, simple & clean

Sass

  • Ruby is fun! so should CSS be
  • Variety of syntactic sugars for CSS
  • Compiles to standard CSS

Nesting

/* SCSS */

table {
  td {
    padding: 1em;
  }
}

hi

/* CSS */

table td {
  padding: 1em;
}

Variables

/* SCSS */

$blue: #0000FF;

a {
  color: $blue;
}

hi

/* CSS */

a {
  color: #0000FF;
}

And more

  • functions
  • loops
  • conditions
  • ...

Developing with Sass is more powerful and clean.

(web) Template Engine

Software that is designed to process web templates and content information to produce output web documents.

Haml

  • Syntactic sugars for HTML
  • Template Engine for Ruby on Rails
  • "Markup should be beautiful"

Example

#profile
	.left.column
		#date= print_date
		#address= current_user.address
	.right.column
		#email= current_user.email
		#bio= current_user.bio

hi

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Middleman

  • command-line tool
  • static websites
  • modern tools
    1. Sass, Haml
    2. Templates, Layouts & Partials
    3. CoffeeScript, Compass
    4. Frontend Optimization,...

Usage

$ middleman init my_project
$ cd my_project

hi

$ middleman server
>> Listening on localhost:4567, CTRL+C to stop

and we can start using these great tools

We talked about...

  • Why Ruby is awsome
  • Sass
  • Haml
  • Middleman

The End

  • by Rotem Harel
  • Presentation created with landslide
  • Thank you!