Advanced Technology for Web Application Design

Advanced
Technology
for
Web Design

Miami Design Meetup
October 13, 2010

Who?

I’m Bryce.
I live down the street.
I’ve been accused of being a backend
developer.

Backend Developer?
  save: function() {
    if (this.blank) {
      Telecaster.db.create("INSERT INTO ﬁles (name, content) VALUES (?, ?)",
[this.name, this.content], function(t, r){
        this.id = r.insertId;
        this.blank = false;
      }.bind(this));
    } else {
      Telecaster.db.update("UPDATE ﬁles SET name=?, content=? WHERE id=?",
[this.name, this.content, this.id], function(t, r){

      }.bind(this));
    }
    this.blank = false;
  }

Backend Developer

• This presentation is a bit terminal-centric.
• Mac OS X:
• /Applications/Utilities/Terminal.app
• Windows:
• Command Line or cmd.exe

Browser Languages

HTML - content
CSS - display content
JavaScript - animate content

Additional Tools

Compass - CSS meta-framework
Rake - build tool
Charleston - site framework

Topics
• HAML
• SASS
• Compass
• CoffeeScript
• Rake
• Charleston

HAML
Hampton’s HTML
Awesome Abstraction
Markup Markup
Language Language

HTML

  <div class='editor_box'>
    <div class='chrome'>
      <input id='ﬁlename' />
      <span class='button' id='save_button'>Save</span>
      <span class='button' id='eval_button'>Eval</span>
    </div>
    <textarea id='editor'></textarea>
  </div>

HAML

  .editor_box
    .chrome
      %input#ﬁlename
      %span.button#save_button Save
      %span.button#eval_button Eval
    %textarea#editor

HAML

  .editor_box

    .chrome

      %input#ﬁlename


HAML

  .editor_box class name
    .chrome

      %input#ﬁlename


HAML

    .chrome Implicit div
      %input#ﬁlename


HAML

      %input#ﬁlename tag name, id name

HAML

      %input#ﬁlename tag name, id name
tag, class, and id names

HAML
!!! 5
%head
  %title haml demo
%body
  %h1 hello
  .content
    %p
      I am a paragraph.
    :markdown
      You can embed markdown in HAML, because HAML
      isn't great at body text.

HTML
<!DOCTYPE html>
<head>
  <title>haml demo</title>
</head>
<body>
  <h1>hello</h1>
  <div class='content'>
    <p>
      I am a paragraph.
    </p>
    <p>You can embed markdown in HAML, because HAML
    isn't great at body text.</p>
  </div>
</body>

Installation

• Mac OS X:
1. gem install haml
• Windows:
1. Install ruby from http://rubyinstaller.org
2. gem install haml

HAML Work ow

1.Write HAML le
2.Use haml tool
3.Enjoy HTML le

HAML Work ow

haml demo.haml > demo.html

CSS

.header { height: 89px; … }
.header div { height: 89px; }
.header .logo { width: 253px; height: 89px;
…}
.header .logo a:link, .header .logo a:visited
{ width: 253px; height: 89px; }

SASS
$header_height: 89px
$logo_width: 253px

.header
  height: $header_height
  div
  .logo
    width: $logo_width
    a:link,
    a:visited
      width: $logo_width

SASS

$header_height: 89px

.header

  div
    width: $logo_width

SASS

$header_height: 89px variable assignment

.header

  div
    width: $logo_width

SASS


.header properties get braced

  div
    width: $logo_width

SASS


variable reference
  div
    width: $logo_width

SASS


variable reference
  div nesting
    width: $logo_width

SASS Work ow

1.Write SASS le
2.Use sass tool
3.Enjoy CSS le

SASS Work ow

sass demo.sass > demo.css

Compass

CSS
Meta-framework
built with SASS

Compass
body#index %body#index
#headers #headers
  #page-header
  #page-header      my groceries
     +span(6)    #ﬁles-header
    link to groceries.csv
   #ﬁles-header    #description-header
    +span(8)     i need these to eat!
#description-header   #content
     +span(10)     %ul#groceries
      %li turkey cutlets
  #content       %li captain crunch
    ul#groceries       %li 12 green peppers
      +no-bullets       %li Brooklyn Local 1

Blueprint vs. Compass
• Blueprint: • Express structure as
classes in HTML
• Express layout as
classes in HTML • Do layout and
formatting in CSS
• Do text formatting in
CSS • Mix in Compass styles
where needed
• Don’t mess up the
Blueprint styles • Great way to build
stable layouts
• Marginally better than
tables

• Compass:

A Bit of History

HAML
+
SASS

Ruby on Rails 3

Gem le:

gem 'haml-rails'
???compass/sass

JavaScript

LISP in C’s Clothing
- Douglas Crockford

JavaScript

Functional
math = {
Object-oriented root: Math.sqrt,
square: square,
Runs everywhere cube: function(x) {
return x * square(x);
}
Gnarly syntax };

Esoteric restrictions

CoffeeScript

math = {
root: Math.sqrt,
math =
square: square,
root: Math.sqrt
cube: function(x) {
square: square
return x * square(x);
cube: (x) -> x * square x
}
};

CoffeeScript
• Indentation-based syntax
• Simpler function de nitions
• Simpler loops and conditionals

for roid in asteroids
for roid2 in asteroids when roid isnt roid2
roid.explode() if roid.overlaps roid2

CoffeeScript
• Compiles to safe, valid cross-browser compatible JavaScript

var _i, _j, _len, _len2, _ref, _ref2, roid, roid2;
_ref = asteroids;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
roid = _ref[_i];
_ref2 = asteroids;
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
roid2 = _ref2[_j];
if (roid !== roid2) {
if (roid.overlaps(roid2)) {
roid.explode();
}
}
}
}

CoffeeScript

• Not a “JavaScript framework” like
Prototype or jQuery

$('.navigation').click (e) ->
  return if e.target.tagName.toLowerCase() is 'a'
  if this isnt (current_nav and current_nav[0])
    close_menus()
    current_nav = $(this)
    current_nav.addClass 'active'
  false

http://bit.ly/jsvscs
save: function() {
  if (this.blank) {
    Telecaster.db.create("INSERT INTO files (name, content) VALUES (?, ?)",
[this.name, this.content], function(t, r){
      this.id = r.insertId;
      this.blank = false;
    }.bind(this));
  } else {
    Telecaster.db.update("UPDATE files SET name=?, content=? WHERE id=?",
[this.name, this.content, this.id], function(t, r){
    }.bind(this));
  }
  this.blank = false;
}

save: ->
  if @blank
    Telecaster.db.create "INSERT INTO files (name, content) VALUES (?, ?)",
      [@name, @content],
      (t, r) =>
        @id = r.insertId
        @blank = false
  else
    Telecaster.db.update "UPDATE files SET name=?, content=? WHERE id=?",
      [@name, @content, @id],
      (t, r) =>
  @blank = false

Disclaimer

CoffeeScript is just for fun. Until it
reaches 1.0, there are no
guarantees that the syntax won't
change between versions.
http://jashkenas.github.com/coffee-script/
emphasis added

Installation

• Mac OS X with homebrew:
1. brew install coffee-script
• Windows:
1. Please read http://bit.ly/coffee4win

CoffeeScript

Build-time
vs.
Load-time

Build-time

coffee -c maths.coffee

Load-time

<script type="text/coffeescript">
# CoffeeScript here
</script>
<script src="coffee-script.js"></script>

Rake

Ruby-based build tool
Used internally by HAML,
SASS, CoffeeScript

Rake

require 'rake'
require 'ﬁleutils'
include FileUtils

HAMLS = Rake::FileList['pages/*.html.haml']
HAML_OUTPUT = HAMLS.map{ |f| f.sub(/^pages/, 'output').sub(/.haml$/, '') }

HAMLS.zip(HAML_OUTPUT) do |p|
  input, output = p
  ﬁle output => [input, 'output'] do
    sh 'haml', input, output
  end
end

Rake

My secret Rake le technique

Rake

My secret Rake le technique
Just copy the last one you wrote
and modify it as little as possible.

Charleston

The static site generator
I want to use.

Charleston

• Bundle of Rake rules
• Example HAML, SASS, and CoffeeScript
les
• Installs HAML and SASS
• Requires separate CoffeeScript install

Charleston Installation

• Mac OS X:
• sudo gem install charleston
• Windows:
1. Install ruby from http://rubyinstaller.org
2. gem install charleston

Charleston Usage

charleston my_project
cd my_project
rake
open output/index.html

Charleston
Creating a New Page
1. Create new HTML or HAML le in
your_project/pages
2. Link to new_page.html (even if it’s HAML) in
your existing pages

%a(href='new_page.html')

Charleston
Creating a New Stylesheet
1. Create new CSS or SASS le in
your_project/stylesheets
2. Reference stylesheets/your_stylesheet.css
(even if it’s SASS) in appropriate HTML les

%link(rel='stylesheet' type='text/css' href='stylesheets/screen.css')

Charleston
Creating a New Script
1. Create new JavaScript or CoffeeScript le in
your_project/javascripts
2. Reference javascripts/your_script.js (even if
it’s CoffeeScript) in appropriate HTML les

%script(type='text/javascript' src='javascripts/example.js')

Charleston
Adding an Image
1. Put the image le in your_project/images
2. Reference images/charleston_chew.jpg in
appropriate HTML les

%img(src='images/charleston_chew.jpg' alt='some candy’)

Charleston

• Each Charleston project is a separate
directory.
• You should aggressively version-control
these projects.
• The only les you need to upload are in
the output directory.

Summary
HAML
SASS
Compass
CoffeeScript
Rake
Charleston

Photo Credits
All photos are of your friendly local historic mansion
landmark, Villa Vizcaya.

http://www. ickr.com/photos/gesteves/3336482837/
http://www. ickr.com/photos/mattkieffer/4671838772/
http://www. ickr.com/photos/portablematthew/21583071/
http://www. ickr.com/photos/spbutterworth/2755374263/
http://www. ickr.com/photos/gesteves/3337338344/
http://www. ickr.com/photos/italintheheart/4017460039/

Advanced Technology for Web Application Design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Advanced Technology for Web Application Design

Ähnlich wie Advanced Technology for Web Application Design (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Advanced Technology for Web Application Design

Hinweis der Redaktion