Advanced Technology for Web Design

Advanced Technology for Web Design Miami Design Meetup October 13,
2010 Tuesday, October 12, 2010

Who? I’m Bryce. I live down the street. I’ve been
accused of being a backend developer. Tuesday, October 12, 2010

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; } Backend Developer? Tuesday, October 12, 2010

Backend Developer •This presentation is a bit terminal- centric. •Mac
OS X: •/Applications/Utilities/Terminal.app •Windows: •Command Line or cmd.exe Tuesday, October 12, 2010

Tuesday, October 12, 2010

Deal with it. Tuesday, October 12, 2010

Browser Languages HTML - content CSS - display content JavaScript
- animate content Tuesday, October 12, 2010

Additional Tools Compass - CSS meta-framework Rake - build tool
Charleston - site framework Tuesday, October 12, 2010

Topics •HAML •SASS •Compass •CoffeeScript •Rake •Charleston Tuesday, October 12,
2010

HAML Tuesday, October 12, 2010

HAML Hampton’s Awesome Markup Language HTML Abstraction Markup Language Tuesday,
October 12, 2010

HTML <div class='editor_box'> <div class='chrome'> <input id='filename' /> <span class='button'
id='save_button'>Save</span> <span class='button' id='eval_button'>Eval</span> </div> <textarea id='editor'></textarea> </div> Tuesday, October 12, 2010

HAML .editor_box .chrome %input#filename %span.button#save_button Save %span.button#eval_button Eval %textarea#editor Tuesday,
October 12, 2010

HAML .editor_box .chrome %input#filename %span.button#save_button Save Tuesday, October 12, 2010

HAML .editor_box .chrome %input#filename %span.button#save_button Save class name Tuesday, October
12, 2010

HAML .editor_box .chrome %input#filename %span.button#save_button Save class name Implicit div

tag name, id name Tuesday, October 12, 2010

tag name, id name tag, class, and id names Tuesday, October 12, 2010

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. Tuesday, October 12, 2010

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> Tuesday, October 12, 2010

Installation •Mac OS X: 1. gem install haml •Windows: 1.
Install ruby from http://rubyinstaller.org 2. gem install haml Tuesday, October 12, 2010

HAML Workflow 1.Write HAML file 2.Use haml tool 3.Enjoy HTML
file Tuesday, October 12, 2010

HAML Workﬂow haml demo.haml > demo.html Tuesday, October 12, 2010

HAML Workﬂow Tuesday, October 12, 2010

SASS Tuesday, October 12, 2010

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; } Tuesday, October 12, 2010

SASS $header_height: 89px $logo_width: 253px .header height: $header_height div height:
$header_height .logo width: $logo_width height: $header_height a:link, a:visited width: $logo_width height: $header_height Tuesday, October 12, 2010

SASS $header_height: 89px .header height: $header_height div width: $logo_width Tuesday,
October 12, 2010

SASS $header_height: 89px .header height: $header_height div width: $logo_width variable
assignment Tuesday, October 12, 2010

assignment properties get braced Tuesday, October 12, 2010

assignment properties get braced variable reference Tuesday, October 12, 2010

assignment properties get braced variable reference nesting Tuesday, October 12, 2010

Installation •Mac OS X: 1. gem install haml •Windows: 1.
Install ruby from http://rubyinstaller.org 2. gem install haml Tuesday, October 12, 2010

SASS Workflow 1.Write SASS file 2.Use sass tool 3.Enjoy CSS
file Tuesday, October 12, 2010

SASS Workﬂow sass demo.sass > demo.css Tuesday, October 12, 2010

Compass Tuesday, October 12, 2010

Compass CSS Meta-framework built with SASS Tuesday, October 12, 2010

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

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

A Bit of History HAML + SASS Tuesday, October 12,
2010

Ruby on Rails 3 Gemﬁle: gem 'haml-rails' ???compass/sass Tuesday, October
12, 2010

HAML + SASS Tuesday, October 12, 2010

2010

CoffeeScript Tuesday, October 12, 2010

JavaScript LISP in C’s Clothing - Douglas Crockford Tuesday, October
12, 2010

JavaScript Functional Object-oriented Runs everywhere Gnarly syntax Esoteric restrictions math
= { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; Tuesday, October 12, 2010

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

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 Tuesday, October 12, 2010

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(); } } } } Tuesday, October 12, 2010

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 Tuesday, October 12, 2010

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 http://bit.ly/jsvscs Tuesday, October 12, 2010

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 Tuesday, October 12, 2010

Installation •Mac OS X with homebrew: 1. brew install coffee-script
•Windows: 1. Please read http://bit.ly/coffee4win Tuesday, October 12, 2010

CoffeeScript Build-time vs. Load-time Tuesday, October 12, 2010

Build-time coffee -c maths.coffee Tuesday, October 12, 2010

Load-time <script type="text/coffeescript"> # CoffeeScript here </script> <script src="coffee-script.js"></script> Tuesday,
October 12, 2010

CoffeeScript Tuesday, October 12, 2010

2010

Rake Tuesday, October 12, 2010

Build Tools Tuesday, October 12, 2010

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

Rake require 'rake' require 'fileutils' 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 file output => [input, 'output'] do sh 'haml', input, output end end Tuesday, October 12, 2010

Rake My secret Rakeﬁle technique Tuesday, October 12, 2010

Rake My secret Rakeﬁle technique Just copy the last one
you wrote and modify it as little as possible. Tuesday, October 12, 2010

Rake Tuesday, October 12, 2010

Charleston Tuesday, October 12, 2010

Charleston The static site generator I want to use. Tuesday,
October 12, 2010

Charleston •Bundle of Rake rules •Example HAML, SASS, and CoffeeScript
ﬁles •Installs HAML and SASS •Requires separate CoffeeScript install Tuesday, October 12, 2010

Charleston Installation •Mac OS X: •sudo gem install charleston •Windows:
1. Install ruby from http://rubyinstaller.org 2. gem install charleston Tuesday, October 12, 2010

Charleston Usage charleston my_project cd my_project rake open output/index.html Tuesday,
October 12, 2010

Charleston 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 Creating a new page %a(href='new_page.html') Tuesday, October 12, 2010

Charleston 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 Creating a new stylesheet %link(rel='stylesheet' type='text/css' href='stylesheets/screen.css') Tuesday, October 12, 2010

Charleston 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 Creating a new script %script(type='text/javascript' src='javascripts/example.js') Tuesday, October 12, 2010

Charleston 1. Put the image ﬁle in your_project/images 2. Reference
images/charleston_chew.jpg in appropriate HTML ﬁles Adding an Image %img(src='images/charleston_chew.jpg' alt='some candy’) Tuesday, October 12, 2010

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. Tuesday, October 12, 2010

Summary HAML SASS Compass CoffeeScript Rake Charleston Tuesday, October 12,
2010

Photo Credits All photos are of your friendly local historic
mansion landmark, Villa Vizcaya. http://www.flickr.com/photos/gesteves/3336482837/ http://www.flickr.com/photos/mattkieffer/4671838772/ http://www.flickr.com/photos/portablematthew/21583071/ http://www.flickr.com/photos/spbutterworth/2755374263/ http://www.flickr.com/photos/gesteves/3337338344/ http://www.flickr.com/photos/italintheheart/4017460039/ Tuesday, October 12, 2010

Questions Tuesday, October 12, 2010

Advanced Technology for Web Design

Advanced Technology for Web Design

More Decks by Bryce "BonzoESC" Kerley

Other Decks in Programming

Featured

Transcript