SO META: Metaprogramming for the Web

Slide 1

Slide 1 text

SO META Meta-programming for the Web

Slide 2

Slide 2 text

HELLO Here’s a little about me. I write for: I speak at: I am a: + + +

Slide 3

Slide 3 text

@ME I’m also on the web. Github: Dribbble: Quora: Twitter: } kevinSuttle kevinsuttle.com New blog:

Slide 4

Slide 4 text

I’ve of cially part of Adobe history.

Slide 5

Slide 5 text

T.O.C. What we’ll cover in this presentation. 1. The past and current states of web development 2. What we’re missing, and how we can nd it 3. Why Ruby isn’t a curse word and why Terminal will not eat your face off

Slide 6

Slide 6 text

2006 Our world, just 5 years ago 1. The “Bird” Flu 2. Big Momma's House 2 grossed $27,736,056 in its opening weekend ranking number one. 3. Goo Goo Dolls celebrated 20 years in the industry THINGS WERE GRIM

Slide 7

Slide 7 text

2006 Building the web, just 5 years ago 1. XHTML 1.0 2. CSS 2.1 3. DHTML and AJAX were the Bieber Fever of the web development world 4. jQuery was introduced 5. Chicken wings were still the rst thing you thought of when someone used the word “app”

Slide 8

Slide 8 text

2011 The web of today 1. HMTL5 (Weee!) 2. CSS3 (See above) 3. jQuery Mobile 4. Though still avian-themed, the word “app” now means something totally different. 5. The emergence of the “One Web” movement

Slide 9

Slide 9 text

WHY DO I CARE? I hate things that suck. I’ve never understood why things continue to suck with the advances of science and technology. My formula for Tweets: “It’s $YEAR, why does $PRODUCT_OR_SERVICE still do $SOMETHING_STUPID_AND_AVOIDABLE?”

Slide 10

Slide 10 text

SUCKY THINGS Why are we OK with this stuff? 1. Remote controls 2. Fondue, bottled water and other scams 3. Car dash displays still being in alarm clock fonts

Slide 11

Slide 11 text

I WANT BETTER Let’s take things into our own hands.

Slide 12

Slide 12 text

WEB DESIGN It’s been evolving by adding language and browser features. Ones we needed. Semantic elements @Font-face support of custom fonts ARIA roles Media queries Local storage All VERY GOOD

Slide 13

Slide 13 text

IT’S NOT ENOUGH We need more than features. We need the languages to work for us.

Slide 14

Slide 14 text

HISTORICAL FLOW Oh, this old song and dance. Idea Wireframes Mockups Browser When does the client see a site’s behavior? How long do large client changes take?

Slide 15

Slide 15 text

GET RAPID Enter “rapid prototyping” Idea “Clickable” Prototype Browser Client can see what the design feels like in it’s intended medium.

Slide 16

Slide 16 text

PROBLEM SOLVED Maybe. Demo time: Axure RP

Slide 17

Slide 17 text

WHAT’S MISSING? As it turns out, a lot. Reusable code Multi-screen behavior True browser rendering differences It’s a prototype of a prototype, though delity is up to you depending on where you are in the process.

Slide 18

Slide 18 text

BOOTSTRAP Twitter gives back. “Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.”

Slide 19

Slide 19 text

WHAT’S MISSING? Looking good, but not quite there. Pros Arguably reusable code Browser rendering differences are displayed Cons No multi-screen, responsive behavior Not automated It’s someone else’s code

Slide 20

Slide 20 text

FOUNDATION Responsive + bootstrapping? Awesome! “An easy to use, powerful, and exible framework for building prototypes and production code on any kind of device. Start here, build everywhere.”

Slide 21

Slide 21 text

WHAT’S MISSING? SO close! Pros Arguably reusable code Browser rendering differences are displayed Cons How do you change major parts of code? Not automated Again, it’s someone else’s code

Slide 22

Slide 22 text

ROLL YOUR OWN Going meta Pros Your code Big changes are easy to make The code works for you Cons Slight learning curve (is this really so bad)? You might have to use *GASP* Terminal (again, not so bad.

Slide 23

Slide 23 text

WHY META? More like, ‘Why not?’ Really, think about HTML5, CSS3, and JS. How much work do these languages do for you? Let’s look at the MVC web stack and see where each area can bene t from meta-programming.

Slide 24

Slide 24 text

MARKUP

Slide 25

Slide 25 text

SMARTER MARKUP Form can now follow function. Markup is easily readable, maintainable, updateable, and dynamically generated for each app’s needs. It puts you in control.

Slide 26

Slide 26 text

ERB Embedded Ruby in HTML “Using ERB, actual Ruby*code can be added to any plain text document for the purposes of generating document information details and/or ow control.”

Slide 27

Slide 27 text

ERB Embedded Ruby in HTML <% Ruby code -‐-‐ inline with output %> <%= Ruby expression -‐-‐ replace with result %> <%# comment -‐-‐ ignored -‐-‐ useful in testing %> % a line of Ruby code -‐-‐ treated as <% line %> (optional -‐-‐ see ERB.new) %% replaced with % if first thing on a line and % processing is used <%% or %%> -‐-‐ replace with <% or %> respectively Basic usage Advanced usage

Slide 28

Slide 28 text

ERB Embedded Ruby in HTML Demo: A WIP Rails app

Slide 29

Slide 29 text

HAML Markup haiku “Haml is the next step in generating views in your application. Haml is a refreshing take that is meant to free us from the sh*tty templating languages we have gotten used to.” http://haml-lang.com

Slide 30

Slide 30 text

HAML “Haml is based on one primary principle. Markup should be beautiful. ... If you sit down and try using HAML, you will learn it within 20 minutes.” Markup haiku

Slide 31

Slide 31 text

HAML Demo: Vanilla Markup haiku

Slide 32

Slide 32 text

WHICH TO USE? HAML allows you to write beautiful, yet minimal markup, while retaining semantics, dynamism, and productivity. “The beauty makes you faster.” *COUGH*HAML*COUGH*

Slide 33

Slide 33 text

HAML Installation and usage. Simple. haml index.html.haml index.html Usage gem install haml Installation

Slide 34

Slide 34 text

JAVASCRIPT

Slide 35

Slide 35 text

WTFJS? For me, coming to JS from ActionScript is like going from... OK, I can’t think of a witty analogy, but trust me, it’s a step backward in terms of Clean Code. Seriously, you’re making Flash look good.

Slide 36

Slide 36 text

ONLY THE GOOD Sorry. I had to.

Slide 37

Slide 37 text

COFFEE ANYONE? CoffeeScript is a new way to look at writing and compiling JavaScript, focusing on terseness, and expressed, returned values. It’s easier to show than tell. [Insert joke about syntactic sugar]

Slide 38

Slide 38 text

COFFEESCRIPT number = -‐42 if opposite Examples if (opposite) number = -‐42; CoffeeScript Plain JavaScript

Slide 39

Slide 39 text

COFFEESCRIPT square = (x) -‐> x * x Examples square = function(x) { return x * x; }; CoffeeScript Plain JavaScript

Slide 40

Slide 40 text

COFFEESCRIPT math = root: Math.sqrt square: square cube: (x) -‐> x * square x Examples math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; CoffeeScript Plain JavaScript

Slide 41

Slide 41 text

COFFEESCRIPT alert "I knew it!" if elvis? Examples if (typeof elvis !== "undefined" && elvis !== null) alert("I knew it!"); CoffeeScript Plain JavaScript

Slide 42

Slide 42 text

A FRESH CUP Getting tired of the coffee jokes yet? CoffeeScript is JavaScript, which means you can write jQuery in CoffeeScript too. CoffeeScript’s compiler itself is written in CoffeeScript (Yo DAWG). Everything in CoffeeScript returns an expression.

Slide 43

Slide 43 text

USAGE Command Line Flags coffee -‐-‐compile -‐-‐output lib/ src/ coffee -‐-‐watch -‐-‐compile scripts.coffee coffee -‐-‐lint scripts.coffee coffee -‐o lib/ -‐cw src/ Usage npm install -‐g coffee-‐script sudo bin/cake install Installation

Slide 44

Slide 44 text

MORE INFO Web resources for CoffeeScript Etc. http://jashkenas.github.com/coffee-‐script Docs + intro + sample code http://arcturo.github.com/library/coffeescript/index.html http://bodil.github.com/coffeescript/ http://speakerdeck.com/u/sstephenson/p/coffeescript-‐is-‐beautiful-‐i-‐never-‐want-‐ to-‐write-‐plain-‐javascript-‐again

Slide 45

Slide 45 text

WHAT ABOUT CSS? Enter SASS and Compass “Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more.” http://sass-lang.com

Slide 46

Slide 46 text

SASS USAGE Just a couple lines in Terminal gem install sass Installation sass -‐-‐watch style.scss:style.css sass -‐-‐watch stylesheets/sass:stylesheets/compiled Compilation

Slide 47

Slide 47 text

CHOICE OF SYNTAX Original SASS, or the newer SCSS SASS is whitespace dependent, and is devoid of { and ; SCSS is a superset of CSS3, allowing plain CSS3 to be inserted interchangeably.

Slide 48

Slide 48 text

SASS OR SCSS Original SASS, or the newer SCSS SCSS $blue: #3bbfce $margin: 16px .content-‐navigation border-‐color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-‐color: $blue SASS $blue: #3bbfce; $margin: 16px; .content-‐navigation { border-‐color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-‐color: $blue; }

Slide 49

Slide 49 text

CSS VARS It’s about frickin’ time. Generated CSS $blue: #3bbfce h1 color: $blue SASS h1 { color: #3bbfce } =>

Slide 50

Slide 50 text

CSS MATH Evaluate on the y Generated CSS .border padding: $margin / 2; margin: $margin / 2; border-‐color: $blue; SASS .border { padding: 8px; margin: 8px; } =>

Slide 51

Slide 51 text

NESTING Making CSS readable Generated CSS table.hl margin: 2em 0 td.ln text-‐align: right SASS table.hl { margin: 2em 0; } table.hl td.ln { text-‐align: right; } =>

Slide 52

Slide 52 text

SHORTHAND Combining inferred properties Generated CSS li font: family: serif weight: bold size: 1.2em SASS li { font-‐family: serif; font-‐weight: bold; font-‐size: 1.2em; } = >

Slide 53

Slide 53 text

INHERITANCE Furthering the selector cascade Generated CSS .error border: 1px #f00 background: #fdd .error.intrusion font-‐size: 1.3em font-‐weight: bold .badError @extend .error border-‐width: 3px SASS .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-‐size: 1.3em; font-‐weight: bold; } .badError { border-‐width: 3px; } =>

Slide 54

Slide 54 text

COLOR FUNCTIONS Like CSS blend modes $link-‐color: lighten(#165b94, 3) !default; $link-‐color-‐hover: adjust-‐color($link-‐color, $lightness: 10, $saturation: 25) ! default; $link-‐color-‐visited: adjust-‐color($link-‐color, $hue: 80, $lightness: -‐4) ! default; $link-‐color-‐active: adjust-‐color($link-‐color-‐hover, $lightness: -‐15) !default;

Slide 55

Slide 55 text

ENTER COMPASS Super-charged SASS. Very meta. Compass is a set of utils for working with SASS that speed up development even further. http://compass-style.org/

Slide 56

Slide 56 text

THE KEY Compass makes rolling your own framework a reality. Compass modularizes your SASS code even further, allowing you to make sweeping changes in a very short amount of time.

Slide 57

Slide 57 text

COMPASS USAGE Let compass take control gem install compass Installation compass create /path/to/project cd /path/to/project compass watch Creation and watching

Slide 58

Slide 58 text

FEATURES Sets of reusable code CSS3: cross-browser mixins with vendor pre xes pre-added Typography: Common font patterns, such as lists, links and vertical rhythm Resets: Browser resets for zeroing out style sheets Layout: Uses common layout patterns like grids and sticky footers Imports @import "compass/typography" Usage

Slide 59

Slide 59 text

COMMONALITIES What do HAML, ERB, SASS, and Compass have in common? Minimal code (D.R.Y.) Whitespace dependent Formatted, compiled, and error-checked The elegance, power, and simplicity Ruby

Slide 60

Slide 60 text

RUBY IS FRIENDLY So is Terminal Ruby and Rails are an absolute pleasure to code in, and are simply my favorite languages. Period. And if you can understand complex CSS oat algorithms, then the Terminal is a breeze. TryRuby.org RailsCasts + tons of free resources

Slide 61

Slide 61 text

THE END We now return you to regularly scheduled programming. Thanks!