Code is a design tool.
Build interactive prototypes to make friends and then bend them to your will.
A tweak of a presentation (https://speakerdeck.com/garthdb/rapid-html) for Web Unleashed.
View Slide
brackets.io
Goals
Design worflows suck
Design worflows suckLet’s make another!
Text!IllustratorWebkit
IllustratorWebkit
Designing out of contextwill always be open tomisinterpretation andtranslation errors.
“But I’m not doing design”
Dirty code
Dirty codeSimple
Dirty codeSimpleAvailable
Dirty codeSimpleAvailableInteractive
Dirty codeSimpleAvailableInteractiveNew
Fast
Prototype
Prototypeindex.html
Prototypeindex.html main.css
Prototypeindex.html main.css app.js
Prototypeindex.html main.css app.jsassets
Examples
Examplesgarthdb.github.com/Brackets-UI-Prototypes
IDE
IDEStarter
IDEStarterPreprocessors
IDEStarterPreprocessorsBuild
IDEStarterPreprocessorsBuildTesting
IDEStarterPreprocessorsBuildTestingHosting
Starter
Startergithub.com/GarthDB/Starter
Preprocessors
Markup
bodyh1 Jade - node template engine#containerif youAreUsingJadep You are amazingelsep Get on it! Jade - node template engineYou are amazingJade CodeHTML
%body%h1 HAML - {markup haiku}#container- if youAreUsingHAML%p You are amazing- else%p Get on it! HAML - {markup haiku}You are amazingHAML CodeHTML
# This is an H1* Red* Green* Blue[an example](http://example.com/ "Title") inline link.This is an H1RedGreenBlueanexample inline link.MarkdownHTML
Styles
border-radius()-webkit-border-radius arguments-moz-border-radius argumentsborder-radius argumentsbodyfont 12px Helvetica, Arial, sans-serif& > a.buttonborder-radius(5px)body {font: 12px Helvetica, Arial, sans-serif;}body > a.button {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}StylusCSS
@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;}SASSCSS
.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;}LessCSS
Script
class Animalconstructor: (@name) ->move: (meters) ->alert @name + " moved #{meters}m."class Snake extends Animalmove: ->alert "Slithering..."super 5Coffeescriptvar 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
Build
Testing
httpsterTesting
Hosting
Hostinggh-pages
END!
END!Nailed it!
garthdb
juliantruitt
ymrl
sakito
emmamsketches
uxaustralia
freee
siteengine
temoki
hiranotomoki
rasagy
yeseniaperezcruz
mraible
jrom
paulrobertlloyd
addyosmani
notwaldorf
destraynor
frogandcode
tanoku
phodgson
sugarenia
philnash