Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Goals

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Design worflows suck Let’s make another!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Text! Illustrator Webkit

Slide 17

Slide 17 text

Illustrator Webkit

Slide 18

Slide 18 text

Designing out of context will always be open to misinterpretation and translation errors.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

“But I’m not doing design”

Slide 21

Slide 21 text

Dirty code Simple Available Interactive New

Slide 22

Slide 22 text

Prototype index.html main.css app.js assets

Slide 23

Slide 23 text

Examples garthdb.github.com/Brackets-UI-Prototypes

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

IDE Starter Preprocessors Build Testing Hosting

Slide 26

Slide 26 text

IDE

Slide 27

Slide 27 text

Starter github.com/GarthDB/Starter

Slide 28

Slide 28 text

Preprocessors

Slide 29

Slide 29 text

Markup

Slide 30

Slide 30 text

body h1 Jade - node template engine #container if youAreUsingJade p You are amazing else p Get on it!

Jade - node template engine

You are amazing

Jade Code HTML

Slide 31

Slide 31 text

%body %h1 HAML - {markup haiku} #container - if youAreUsingHAML %p You are amazing - else %p Get on it!

HAML - {markup haiku}

You are amazing

HAML Code HTML

Slide 32

Slide 32 text

# This is an H1 * Red * Green * Blue [an example](http://example.com/ "Title") inline link.

This is an H1

  • Red
  • Green
  • Blue

an example inline link.

Markdown HTML

Slide 33

Slide 33 text

Styles

Slide 34

Slide 34 text

border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif & > a.button border-radius(5px) body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Stylus CSS

Slide 35

Slide 35 text

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } body { font: 12px Helvetica, Arial, sans-serif; & > a.button { @include border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } SASS CSS

Slide 36

Slide 36 text

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } body { font: 12px Helvetica, Arial, sans-serif; & > a.button { .border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Less CSS

Slide 37

Slide 37 text

Script

Slide 38

Slide 38 text

class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 Coffeescript var Animal, Snake, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Snake = (function(_super) { __extends(Snake, _super); function Snake() { return Snake.__super__.constructor.apply(this, arguments); } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(Animal); Javascript

Slide 39

Slide 39 text

Build

Slide 40

Slide 40 text

httpster Testing

Slide 41

Slide 41 text

Hosting gh-pages

Slide 42

Slide 42 text

END! Nailed it!